使用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。