使用HTML按钮调用JavaScript函数

Question

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

这是代码：

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

Answer 1

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

1：在HTML中进行定义：

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

2：将其添加到Java事件中的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中运行后，在更新代码时，将更容易判断它是否在其他浏览器中运行。