使用 HTML 按钮调用 JavaScript 函数

javascript html

2022-08-30 00:19:31

我正在尝试使用HTML按钮来调用JavaScript函数。

代码如下：

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

它似乎不能正常工作。有没有更好的方法来做到这一点？

这是链接：http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html 单击左下角的容量选项卡。如果值未更改，该按钮应生成警报;如果输入值，该按钮应生成图表。

答案 1

有几种方法可以使用 HTML/DOM 处理事件。没有真正的正确或错误的方式，但不同的方式在不同的情况下是有用的。

1：在HTML中有定义它：

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2：将其添加到 Javascript 中事件的 DOM 属性中：

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3：并且使用Javascript将一个函数附加到事件处理程序：

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

第二个和第三个方法都允许内联/匿名函数，并且都必须在从文档中分析元素后声明。第一种方法不是有效的 XHTML，因为 onclick 属性不在 XHTML 规范中。

第1和第2种方法是互斥的，这意味着使用一个（第2个）将覆盖另一个（第1个）。第 3 种方法将允许您将任意数量的函数附加到同一事件处理程序，即使也使用了第 1 个或第 2 个方法。

最有可能的是，问题出在您的函数中的某个地方。访问链接并运行脚本后，将运行 CapacityChart（）函数并打开两个弹出窗口（根据脚本关闭一个弹出窗口）。其中有以下行：CapacityChart()

CapacityWindow.document.write(s);

请尝试以下操作：

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

编辑
当我看到你的代码时，我以为你是专门为IE编写的。正如其他人所提到的，您需要将对的引用替换为。但是，在此之后，您仍将承担修复脚本的任务，因此我建议您至少首先在IE中使用它，因为您将代码更改为跨浏览器工作的任何错误都可能导致更多的混乱。一旦它在IE中工作，当你更新代码时，将更容易判断它是否在其他浏览器中工作。document.alldocument.getElementById

答案 2

我会说最好以一种不突兀的方式添加javascript......

如果使用jQuery，你可以做这样的事情：

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >