使用HTML按钮调用JavaScript函数
我正在尝试使用HTML按钮来调用JavaScript函数。
这是代码：
但它似乎无法正常工作。 有一个更好的方法吗？
这是链接：[/bendel/toolscalculators.html]点击左下方的容量标签。 如果值未更改，则按钮应生成警报，如果输入值，则应生成图表。
fmz asked -03-18T13:23:21Z
9个解决方案
289 votes
有几种方法可以使用HTML / DOM处理事件。 没有真正的正确或错误的方式，但不同的方式在不同的情况下是有用的。
1：在HTML中定义它：
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规范中。
第1和第2种方法是互斥的，意味着使用一个(第二个)将覆盖另一个(第一个)。 第3种方法允许您将同样多的函数附加到同一个事件处理程序，即使已经使用了第1或第2种方法。
最有可能的是，问题出在您的document.all功能中。 访问链接并运行脚本后，运行CapacityChart()函数并打开两个弹出窗口(根据脚本关闭一个)。 你有以下几行：
CapacityWindow.document.write(s);
请尝试以下方法：
CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();
编辑
当我看到你的代码时，我以为你是专门为IE编写的。 正如其他人提到的那样，你需要用document.getElementById替换对document.all的引用。但是，你仍然需要在此之后修复脚本，所以我建议首先让它在IE中工作，因为你将代码改为 跨浏览器工作可能会导致更多的混乱。 一旦它在IE中工作，当你更新代码时，更容易判断它是否在其他浏览器中工作。
Andy E answered -03-18T13:24:32Z
25 votes
我会说以不突兀的方式添加javascript会更好...
如果使用jQuery你可以做类似的事情：
$(document).ready(function(){
$('#MyButton').click(function(){
CapacityChart();
});
});
Paul answered -03-18T13:25:05Z
6 votes
您的HTML以及从按钮调用该函数的方式看起来是正确的。
问题似乎出现在document.all函数中。 我在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
Jeff answered -03-18T13:25:49Z
3 votes
这看起来很正确。 我猜你用不同的名字或在按钮不可见的上下文中定义了你的函数。 请添加一些代码
jitter answered -03-18T13:26:17Z
1 votes
您遇到的一个主要问题是您使用浏览器嗅探是没有充分理由的：
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上，所以getElementById将不会是name. Chrome是否支持input？ 也许，但话说再说也许不是。 那么其他浏览器呢？
getElementById分支上的代码版本应该可以在从1996年开始返回Netscape Navigator 2的任何浏览器上运行，所以你应该坚持使用它...除了它不起作用(或者不保证 因为您没有在input元素上指定name属性，因此它们不会作为命名元素添加到窗体的elements数组中：
给他们一个名字并使用getElementById阵列，或(更好)使用
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 answered -03-18T13:27:29Z
1 votes
您的代码在此行上失败：
var RUnits = Math.abs(document.all.Capacity.RUnits.value);
我试着用萤火虫踩它然后在那里失败了。 这应该可以帮助你找出问题所在。
你引用了jquery。 你也可以在所有这些功能中使用它。 它会显着清理你的代码。
Patricia answered -03-18T13:28:12Z
1 votes
您知道，当您调用该函数时，分号(;)不应该在按钮中。
所以它应该是这样的：οnclick="CapacityChart()"
那一切都应该工作:)
jacki answered -03-18T13:28:56Z
0 votes
我有一个智能的函数调用支持按钮代码：
Intelligent Button:
Note: Try pressing a key after clicking.Ahhhh
textmonster404 answered -03-18T13:29:24Z
-2 votes
愚蠢的方式：
οnclick="javascript:CapacityChart();"
您应该阅读有关离散javascript的信息，并使用框架绑定方法将回调绑定到dom事件。
erenon answered -03-18T13:29:58Z
