javascript - 使用 HTML 按钮调用 JavaScript 函数

Question

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

代码如下:

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

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

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

Answer 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 规范中。

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

很可能，问题出在您的 CapacityChart() 函数中。访问您的链接并运行脚本后，CapacityChart() 函数运行并打开两个弹出窗口(根据脚本关闭一个)。您有以下行:

CapacityWindow.document.write(s);

请尝试以下方法:

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

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