使用HTML按钮调用JavaScript函数

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

代码如下：

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

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

以下是链接：单击左下部分的“容量”选项卡。如果值未更改，按钮应生成警报，如果您输入值，按钮应生成图表。

愚蠢的方式：

onclick="javascript:CapacityChart();"

---

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

我认为最好以不显眼的方式添加javascript

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

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

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

$（文档）.ready（函数（）{
$（“#MyButton”）。单击（函数（）{
电容图（）；
});
});

这看起来是正确的。我想您可能是用不同的名称定义了函数，或者是在按钮看不到的上下文中定义了函数。请添加一些代码

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

1:在HTML中有定义：

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

3：使用Javascript将函数附加到事件处理程序：

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

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种方法

问题很可能存在于

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中工作，当您更新代码时，就可以更容易地判断它是否在其他浏览器中工作。

您遇到的一个主要问题是，您使用浏览器嗅探时没有充分的理由：

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是否支持

文档.all

？也许吧，但也许不是。其他浏览器呢

Netscape分支上的代码版本应该可以在任何浏览器上正常工作，从1996年回到Netscape Navigator 2，所以您可能应该坚持这一点。。。除了因为您没有在

输入

元素上指定

名称

属性而无法工作（或不能保证工作），因此它们不会作为命名元素添加到表单的

元素

数组中：

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

这将适用于所有现代浏览器-无需分支。为了安全起见，用检查

getElementById

support:

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上的控制台中发现了这个错误：bendelcorp.js的第759行“document.all未定义”

编辑：

---

看起来像

文档。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>

智能按钮：注意：单击后尝试按一个键。

啊

简单答案：

   onclick="functionName(ID.value);

---

其中ID是输入字段的ID。

请定义“似乎无法正常工作”。当你点击它时，你会得到什么错误？这个按钮在IE8中工作，但不是FF3.5，因为JavaScript错误（见Jeff的回答）是的，原来是文档。这一切都是非标准IE的东西；用建议的替代方案更新了我的答案。@paper1337，@Jeff:该函数在IE8中仍然无法达到预期效果，因此即使将document.all替换为document.getElementById也无法修复它。同意。在许多情况下，jQuery和其他框架对于少量的javascript来说完全是过火了，而且并非所有的javascript代码都需要跨浏览器。。我想说的是“一个更好的方法”是不引人注目的。。。没有jQuery，类似于：var btn=document.getElementById（'MyButton'）；btn.onclick=function（）{CapacityChart（）；}这些使用jQuery的人似乎习惯于将它用于web上的所有内容。使用平面JavaScript怎么样

   onclick="functionName(ID.value);