Question

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

以下是代码：

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

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

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

Answer 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规范中。

第一种和第二种方法互斥，意味着使用一种（第二种）将覆盖另一种（第一种）。第3种方法允许您将同样多的函数附加到同一个事件处理程序中，即使已经使用了第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中工作，当你更新代码时，更容易判断它是否在其他浏览器中工作。

Answer 2

我想说以不突兀的方式添加javascript会更好......

如果使用jQuery，你可以做类似的事情：

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

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

Answer 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

Answer 4

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

Answer 5

您知道，当您调用该函数时，分号（; ）不应该在按钮中。

所以它应该是这样的：onclick="CapacityChart()"

那么一切都应该有效：）

Answer 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的任何浏览器上运行，因此您应该坚持使用...除非它不起作用（或不保证可以工作），因为您没有在name元素上指定input属性，因此它们不会作为命名元素添加到表单的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;
}

会有所帮助。

Answer 7

您的代码在此行中失败：

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

我试着用萤火虫踩它然后在那里失败了。这应该可以帮助你解决问题。

你引用了jquery。你也可以在所有这些功能中使用它。它会显着清理你的代码。

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

Answer 9

简单答案：

   onclick="functionName(ID.value);

其中ID是输入字段的ID。

Answer 10

愚蠢的方式：

onclick="javascript:CapacityChart();"

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

使用HTML按钮调用JavaScript函数

10 个答案: