使用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规范中.

第1和第2种方法是互斥的,意味着使用一个(第二个)将覆盖另一个(第一个).第3种方法允许您将同样多的函数附加到同一个事件处理程序,即使已经使用了第1或第2种方法.

最有可能的是,问题出在你的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中工作,当你更新代码时,更容易判断它是否在其他浏览器中工作.

Answer 2

我会说以不突兀的方式添加javascript会更好...

如果使用jQuery你可以做类似的事情:

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

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

Answer 3

您的HTML以及从按钮调用该函数的方式看起来是正确的.

问题似乎出现在该CapacityCount功能中.我在Firefox 3.5的控制台中收到此错误:bendelcorp.js第759行的"document.all is undefined".

编辑:

看起来像document.all只是IE的东西,是访问DOM的非标准方式.如果你使用document.getElementById(),它可能应该工作.示例:document.getElementById("RUnits").value代替document.all.Capacity.RUnits.value