使用HTML按钮调用JavaScript函数

我试图使用HTML按钮调用JavaScript函数。

代码如下:

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

但它似乎不能正常工作。还有更好的办法吗?

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

1118050 次浏览
小开

我认为最好以一种不引人注目的方式添加javascript……

如果使用jQuery，你可以这样做:

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


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

这看起来是正确的。我猜你用不同的名字定义了你的函数，或者在一个对按钮不可见的上下文中。请添加一些代码

小开
最佳答案

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

1:在HTML中定义它:

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

2:有添加到DOM属性的事件在Javascript:

//- 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();
< p > 编辑 < br > 当我看到你的代码时，我以为你是专门为IE写的。正如其他人提到的，你需要用document.getElementById替换对document.all的引用。然而，在此之后，你仍然有修复脚本的任务，所以我建议让它至少在IE中工作，因为你改变代码跨浏览器工作时所犯的任何错误都可能导致更多的混乱。一旦它在IE中工作，当你更新代码时，就更容易判断它是否在其他浏览器中工作
小开

你有一个主要的问题是你使用浏览器嗅探没有好的理由:

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支持来替换浏览器版本大于或等于4的嗅探:

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
// do stuff...
}

你可能也想验证你的输入;类似的

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
alert("Diameter should be numeric");
return;
}

会有所帮助。

小开

您的HTML和从按钮调用函数的方式看起来是正确的。

问题似乎出在CapacityCount函数中。我在Firefox 3.5的控制台中得到这个错误:“document。在bendelcorp.js的第759行，“所有都是未定义的”。

编辑:

看起来document.all是一个仅适用于ie的东西，是一种访问DOM的非标准方式。如果你使用document.getElementById()，它应该可以工作。示例:document.getElementById("RUnits").value而不是document.all.Capacity.RUnits.value

小开

你的代码在这一行失败了:

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

我试着用firebug踩过它，它失败了。这应该能帮你解决问题。

你已经引用了jquery。你也可以在所有这些函数中使用它。它将显著地清理您的代码。

小开

正如你所知道的，当你调用函数时，分号(；)不应该出现在按钮中。

所以它应该看起来像这样:onclick="CapacityChart()"

然后这一切都应该工作:)

小开

我有一个智能函数调用回退按钮代码:

<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>

提交答案