使用HTMLbutton来调用JavaScript函数
我正在尝试使用HTMLbutton来调用JavaScript函数。
代码如下：
<input type="button" value="Capacity Chart" onclick="CapacityChart();"> 它似乎并没有正常工作。 有没有更好的方法来做到这一点？
这里是链接： http ： //projectpath.ideapeoplesite.com/bendel/toolscalculators.html点击左下部分的容量选项卡。 如果值没有改变，button应该会生成一个警报，如果你input的值应该会生成一个图表。
有几种方法可以处理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);
第二种和第三种方法都允许使用内联/匿名函数，并且都必须在元素从文档中parsing后进行声明。 第一种方法是无效的XHTML，因为onclick属性不在XHTML规范中。
第一种和第二种方法是相互排斥的，意思是使用一个（第二个）将覆盖另一个（第一个）。 第三种方法将允许您将同样多的function添加到相同的事件处理程序中，即使使用了第一种或第二种方法也是如此。
最有可能的问题在于CapacityChart()函数中的某处。 在访问链接并运行脚本之后，CapacityChart（）函数将运行，并打开两个popup窗口（根据脚本closures一个）。 你有以下行的地方：
CapacityWindow.document.write(s);
尝试以下方法：
CapacityWindow.document.open("text/html"); CapacityWindow.document.write(s); CapacityWindow.document.close();
编辑
当我看到你的代码，我以为你是专门为IE写的。 正如其他人所提到的，您将需要用document.getElementByIdreplace对document.all引用。 但是，在这之后你仍然有修复脚本的任务，所以我build议让它至less在IE中工作，因为任何改变代码跨浏览器的错误都可能导致更多的混淆。 一旦它在IE中工作，在更新代码时会更容易判断它是否在其他浏览器中工作。
我会说这将是一个非强迫性的方式添加JavaScript更好…
如果使用jQuery，你可以做如下的事情：
<script> $(document).ready(function(){ $('#MyButton').click(function(){ CapacityChart(); }); }); </script> <input type="button" value="Capacity Chart" id="MyButton" >
你的HTML和从button调用函数的方式看起来是正确的。
问题似乎在CapacityCount函数中。 我得到这个错误在我的控制台在Firefox 3.5上：“document.all未定义”在行759 bendelcorp.js。
编辑：
看起来像document.all是一个IE浏览器的东西，是一个访问DOM的非标准方式。 如果您使用document.getElementById() ，它应该可能工作。 例如： document.getElementById("RUnits").value而不是document.all.Capacity.RUnits.value
这看起来正确。 我想你已经定义了你的函数，或者使用不同的名字，或者在button不可见的上下文中。 请添加一些代码
您遇到的一个主要问题是您使用浏览器嗅探没有很好的理由：
if(navigator.appName == 'Netscape') { vesdiameter = document.forms['Volume'].elements['VesDiameter'].value; // more stuff snipped } else { vesdiameter = eval(document.all.Volume.VesDiameter.value); // more stuff snipped }
我在Chrome上，所以navigator.appName不会是Netscape 。 Chrome是否支持document.all ？ 也许吧，但是可能不会。 那么其他浏览器呢？
在Netscape分支上的代码版本应该可以在任何浏览器上从1996年开始回到Netscape Navigator 2，所以你应该坚持下去……除非它不能工作（或者不能保证工作），因为你没有在input元素上指定一个name属性，所以他们不会被添加到表单的elements数组作为命名元素：
<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">
要么给他们一个名字，并使用elements数组，或（更好）使用
var vesdiameter = document.getElementById("VesDiameter").value;
这将在所有现代浏览器上运行 – 不需要分支。 只是为了安全起见，用一个getElementById支持检查来replace大于或等于4的浏览器版本的嗅探：
if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it // do stuff... }
你可能也想validation你的input， 就像是
var vesdiameter = parseFloat(document.getElementById("VesDiameter").value); if (isNaN(vesdiameter)) { alert("Diameter should be numeric"); return; }
有助于。
你的代码在这一行上失败：
var RUnits = Math.abs(document.all.Capacity.RUnits.value);
我尝试着用萤火虫踩踏它，但是在那里失败了。 这应该可以帮助你找出问题所在。
你有jquery引用。 你也可以在所有这些function中使用它。 它会清理你的代码显着。
只是你知道，当你调用函数时，分号（ ; ）不应该出现在button中。
所以它应该看起来像这样： onclick="CapacityChart()"
那么这一切都应该工作:)
我有一个智能的function，呼叫支持button代码：
<br> <p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br> <button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>
愚蠢的方式：
onclick="javascript:CapacityChart();"
您应该阅读有关离散JavaScript，并使用框架绑定方法绑定到dom事件的callback。
