使用 HTML 按钮调用 JavaScript 函数答案

【问题标题】：Using an HTML button to call a JavaScript function使用 HTML 按钮调用 JavaScript 函数
【发布时间】：2010-12-29 04:04:09
【问题描述】：

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

代码如下：

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

但它似乎无法正常工作。有没有更好的方法来做到这一点？

这里是链接：http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html 点击左下角的容量标签。如果值未更改，该按钮应生成警报，如果您输入值，则应生成图表。

【问题讨论】：

请定义“似乎无法正常工作”。单击它时遇到什么错误？
该按钮在 IE8 中有效，但由于 JavaScript 错误而不适用于 FF 3.5（请参阅 Jeff 的回答）
是的，原来 document.all 是一个非标准的 IE 东西；用建议的替代方法更新了我的答案。
@paper1337, @Jeff：这个函数在 IE8 中仍然没有达到预期的效果，所以即使将 document.all 替换为 document.getElementById 也无法解决。

标签： javascript html

【解决方案1】：

有几种方法可以使用 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);

第二种和第三种方法都允许内联/匿名函数，并且都必须在从文档中解析出元素后声明。第一种方法不是有效的 XHTML，因为 onclick 属性不在 XHTML 规范中。

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

很可能，问题出在您的CapacityChart() 函数中。访问您的链接并运行脚本后，CapacityChart() 函数运行并打开两个弹出窗口（根据脚本关闭一个）。您有以下行：

CapacityWindow.document.write(s);

请尝试以下方法：

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

编辑
当我看到你的代码时，我以为你是专门为 IE 编写的。正如其他人所提到的，您需要用document.getElementById 替换对document.all 的引用。但是，在此之后您仍然需要修复脚本，因此我建议您至少先在 IE 中运行它，因为您在更改代码以跨浏览器工作时所犯的任何错误都可能导致更多的混乱。一旦它在 IE 中运行，在您更新代码时，它会更容易判断它是否在其他浏览器中运行。

【讨论】：

使用jquery，还有：$("#clickMe").bind('click', function () { alert('hello!'); };)

【解决方案2】：

我会说最好以不显眼的方式添加 javascript...

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

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

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

【讨论】：

同意。在许多情况下，jQuery 和其他框架对于少量的 javascript 来说太过分了，而且并不是所有的 javascript 代码都需要跨浏览器。
很公平.. 我试图提出的观点是“一种更好的方法来做到这一点”是不引人注目的......没有 jQuery，类似于： var btn = document.getElementById('MyButton') ; btn.onclick = function(){CapacityChart();}
这些使用 jQuery 的人似乎已经准备好将它用于所有网络。使用平面 JavaScript 怎么样？天哪，jQuery 现在真的让我很紧张。哈哈！我将其称为懒人创建网络的方式，因为我想这就是它的全部。
@DrLouie：我对 jQuery 没有任何意见，它是解决许多问题的好方法，但是当它没有被 OP 标记或询问时，任何提及 jQuery 都应该由非 jQuery 来协助方法，否则他们会冒 a) 混淆提问者的风险 - 他可能不知道 jQuery 是什么，或者 b) 通过告诉他使用 jQuery 编写几行 javascript 代码来烦扰提问者。 @Paul - 我必须说那不是一本好书……
抱歉...发布了错误的链接 - 旨在发布一个 stackoverflow 链接。 stackoverflow.com/questions/1588374/…

【解决方案3】：

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

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

编辑：

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

【讨论】：

这不是函数的具体问题，它不会在IE中抛出任何错误

【解决方案4】：

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

【讨论】：

【解决方案5】：

您知道，当您调用函数时，分号 (;) 不应该出现在按钮中。

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

那么这一切都应该工作:)

【讨论】：

【解决方案6】：

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

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;

适用于所有现代浏览器 - 无需分支。为了安全起见，请将大于或等于 4 的浏览器版本的嗅探替换为检查 getElementById 支持：

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

会有帮助的。

【讨论】：

嗨 NickFitz，我面临的一个挑战是这个脚本最初是在 1993 年编写的 - 因此引用了 Netscape 4。我得到了一些帮助来更新它，它一直在工作，直到我把它插入它指定页面。
我怀疑它是在 1993 年写的，因为 Brendan Eich 直到 1995 年才发明 JS en.wikipedia.org/wiki/Javascript#History ;-) 我强烈建议使用 document.getElementById 并去掉其他东西。
我认为在处理浏览器兼容性之前至少让它在 IE 中工作是谨慎的，否则他将不知道他的浏览器兼容性问题是否会得到解决，因为它仍然无法工作.
最好使用标准 DOM 技术让它工作，这样就不会有任何浏览器兼容性问题可言:-)

【解决方案7】：

您的代码在这一行失败：

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

我尝试用 firebug 单步执行它，但它在那里失败了。这应该可以帮助您找出问题所在。

你已经引用了 jquery。您不妨在所有这些功能中使用它。它会显着清理您的代码。

【讨论】：

不过，它在 IE 中并没有失败。
因为 document.all 是 IE 的东西。他应该只使用 $('#RUints').val() jquery notation b/c 他已经包含 jquery。这会处理任何浏览器差异并清理代码。

【解决方案8】：

我有一个智能函数回调按钮代码：

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

【讨论】：

【解决方案9】：

简单回答：

   onclick="functionName(ID.value);

其中 ID 是输入字段的 ID。

【讨论】：

【解决方案10】：

愚蠢的方式：

onclick="javascript:CapacityChart();"

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

【讨论】：

@erenon：哦，来吧。这不是他的问题，符号非常好，没有理由仅仅为了分配一个 onclick 事件而进入复杂的绑定和框架。
感谢 Pekka 为我辩护。我只想要一个简单的按钮来正常工作。
javascript: 协议在 onclick 事件中不需要。 onclick 事件已经是 javascript。 javascript: 协议用于在链接的 href 属性中执行 javascript。