使用 HTML 按钮调用 JavaScript 函数 [英] Using an HTML button to call a JavaScript function

问题描述

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

I am trying to use an HTML button to call a JavaScript function.

代码如下:

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

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

It doesn't seem to work correctly though. Is there a better way to do this?

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

Here is the link:http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html click on the capacity tab in the bottom left section. The button should generate an alert if the values are not changed and should produce a chart if you enter values.

推荐答案

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

There are a few ways to handle events with HTML/DOM. There's no real right or wrong way but different ways are useful in different situations.

1:在 HTML 中定义它:

1: There's defining it in the HTML:

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

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

2: There's adding it to the DOM property for the event in Javascript:

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

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

3:使用 Javascript 将函数附加到事件处理程序:

3: And there's attaching a function to the event handler using 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 规范中.

Both the second and third methods allow for inline/anonymous functions and both must be declared after the element has been parsed from the document. The first method isn't valid XHTML because the onclick attribute isn't in the XHTML specification.

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

The 1st and 2nd methods are mutually exclusive, meaning using one (the 2nd) will override the other (the 1st). The 3rd method will allow you to attach as many functions as you like to the same event handler, even if the 1st or 2nd method has been used too.

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

Most likely, the problem lies somewhere in your CapacityChart() function. After visiting your link and running your script, the CapacityChart() function runs and the two popups are opened (one is closed as per the script). Where you have the following line:

CapacityWindow.document.write(s);

请尝试以下操作:

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

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

EDIT
When I saw your code I thought you were writing it specifically for IE. As others have mentioned you will need to replace references to document.all with document.getElementById. However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion. Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.

这篇关于使用 HTML 按钮调用 JavaScript 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！