小编典典

使用 HTML 按钮调用 JavaScript 函数

all

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

这是代码:

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

它似乎无法正常工作。有一个更好的方法吗?

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


阅读 108

收藏
2022-05-12

共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.allwith的引用document.getElementById。但是,在此之后您仍然需要修复脚本,因此我建议您至少先在
IE 中运行它,因为您在更改代码以跨浏览器工作时所犯的任何错误都可能导致更多的混乱。一旦它在 IE
中运行,在您更新代码时,它会更容易判断它是否在其他浏览器中运行。

2022-05-12