我试图使用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:有添加到DOM属性的事件在Javascript:

//- 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();

EDIT When I saw your code I thought you were writing it specifically for IE. As others have mentioned you will need to replace references to document.all with document.getElementById. However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion. Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.

其他回答

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

问题似乎出在CapacityCount函数上。我在Firefox 3.5的控制台中得到这个错误:“document。在bendelcorp.js的第759行,“所有都是未定义的”。

编辑:

看起来像文件。all是一个仅限ie的东西,是访问DOM的非标准方式。如果使用document.getElementById(),它应该可以工作。例子:. getelementbyid(“RUnits”)。value而不是document.all.Capacity.RUnits.value

你有一个主要的问题是你使用浏览器嗅探没有好的理由:

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浏览器,导航器。appName不会是Netscape。Chrome是否支持document.all?也许吧,但也可能不是。那么其他浏览器呢?

Netscape分支上的代码版本应该可以在任何浏览器上运行,从1996年开始就可以使用Netscape Navigator 2,所以您可能应该坚持使用它……除非它不能工作(或不能保证工作),因为你没有在输入元素上指定name属性,所以它们不会作为命名元素添加到表单的elements数组中:

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

要么给它们一个名称并使用元素数组,要么(更好)使用

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

会有所帮助。

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

1:在HTML中定义它:

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

2:有添加到DOM属性的事件在Javascript:

//- 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();

EDIT When I saw your code I thought you were writing it specifically for IE. As others have mentioned you will need to replace references to document.all with document.getElementById. However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion. Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.

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

我有一个智能函数调用回退按钮代码:

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