使用HTML按钮调用JavaScript函数

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

这是代码：

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

虽然它似乎无法正常工作。有一个更好的方法吗？

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

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

1：在HTML中进行定义：

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

2：将其添加到Java事件中的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规范中。

第一种和第二种方法是互斥的，这意味着使用一种（第二种）将覆盖另一种（第一种）。第三种方法将允许您将任意数量的函数附加到同一事件处理程序，即使也已使用第一种或第二种方法。

问题很可能出在您的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中运行后，在更新代码时，将更容易判断它是否在其他浏览器中运行。

我会说最好以一种不引人注目的方式添加javascript ...

如果使用jQuery，则可以执行以下操作：

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

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

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

问题似乎出在 CapacityCount函数中。我在Firefox 3.5的控制台中收到此错误：bendelcorp.js的第759行上的“ document.all未定义”。

编辑：

看起来document.all是仅IE的事物，并且是访问DOM的非标准方式。如果使用document.getElementById()，它应该可以工作。示例：document.getElementById("RUnits").value代替document.all.Capacity.RUnits.value

这看起来是正确的。我猜您是使用其他名称或在按钮不可见的上下文中定义了函数。请添加一些代码

众所周知，调用函数时不应在按钮中存在分号（;）。

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

那一切都应该工作:)

您遇到的一个主要问题是，您无缘无故地使用浏览器嗅探：

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，分支应该可以在任何浏览器上运行，因此您可能应该坚持使用...，除非它不起作用（或不能保证可以工作） ），因为您尚未name在input元素上指定属性，因此不会将它们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;
}

有助于。

您的代码在此行失败：

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

我试图通过萤火虫一步一步，但在那里失败。应该可以帮助您找出问题所在。

你引用了jQuery。您最好在所有这些功能中使用它。它将大大清理您的代码。

我有一个智能的功能回叫按钮代码：

<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="functionName(ID.value);

其中ID是输入字段的ID。

愚蠢的方式：

onclick="javascript:CapacityChart();"

您应该阅读有关离散javascript的知识，并使用框架bind方法将回调绑定到dom事件。