在html中加入按钮函数,使用HTML按钮调用JavaScript函数

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

这是代码：

虽然它似乎无法正常工作。 有一个更好的方法吗？

这是链接：http：//projectpath.ideapeoplesite.com/bendel/toolscalculators.html单击左下部分的容量选项卡。 如果未更改值，则该按钮应生成警报；如果输入值，则应生成图表。

请定义"似乎无法正常工作"。 单击时遇到什么错误？

由于JavaScript错误，该按钮在IE8中有效，但在FF 3.5中无效(请参阅Jeffs答案)

是的，原来是document.all是非标准的IE； 用建议的替代方法更新了我的答案。

@ paper1337，@ Jeff：该功能在IE8中仍然无法达到预期的效果，因此即使将document.all换为document.getElementById也无法解决该问题。

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

1：在HTML中进行定义：

2：将其添加到Java事件中的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!); };)

我会说最好以一种不引人注目的方式添加javascript ...

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

$(document).ready(function(){

$('#MyButton').click(function(){

CapacityChart();

});

});

同意。在许多情况下，jQuery和其他框架对于少量的javascript来说是过大的杀伤力，并且并非所有javascript代码都需要跨浏览器。

相当公平..我试图提出的观点是"一种更好的方法"毫不引人注目...如果没有jQuery，类似：var btn = document.getElementById(MyButton); btn.onclick = function(){CapacityChart();}

我试过了，但也不行。

这些使用jQuery的人似乎已开始将其用于所有Web。使用扁平JavaScript怎么样？天哪，jQuery现在真的让我感到不安。大声笑！坏习惯被称为懒惰的创建网络的方式，因为我猜这就是真正的全部。

@DrLouie：我对jQuery一点都不感兴趣，它是解决许多问题的好方法，但是当OP没有对其进行标记或询问时，也应使用非jQuery方法来辅助提及jQuery，否则会冒风险a)混淆提问者-他可能不知道jQuery是什么，或者b)告诉他在几行javascript代码中使用jQuery来烦恼提问者。 @Paul-我必须说这不是一本好书...

抱歉...发布了错误的链接-旨在发布一个stackoverflow链接。 stackoverflow.com/questions/1588374/

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

问题似乎出在CapacityCount函数中。我在Firefox 3.5的控制台中收到此错误：bendelcorp.js的第759行上的" document.all未定义"。

编辑：

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

那不是专门的功能问题，它不会在IE中引发任何错误

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

众所周知，调用函数时不应在按钮中存在分号(;)。

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

那一切都应该工作:)

您的代码在此行失败：

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

我试图通过萤火虫一步一步，但在那里失败。应该可以帮助您找出问题所在。

你有jQuery引用。您最好在所有这些功能中使用它。它将大大清理您的代码。

但是，在IE上不会失败。

因为document.all是IE的东西。他应该只使用$(＃RUints).val()jquery注释b / c他已经包括了jquery。这样可以解决所有浏览器差异，并清理代码。

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

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？也许吧，但也许再也没有。那其他浏览器呢？

从1996年回到Netscape Navigator 2的版本，Netscape分支上的代码版本应可在任何浏览器上使用，因此您可能应该坚持使用……除非它不起作用(或不起作用)。保证可以正常工作)，因为您尚未在input元素上指定name属性，因此不会将它们作为命名元素添加到表单的elements数组中：

给他们起一个名字并使用elements数组，或者(更好)使用

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;

}

有助于。

嗨，尼克菲茨，我面临的挑战之一是该脚本最初是1993年编写的，因此是对Netscape 4的引用。在对其进行更新之前，我获得了一些帮助，直到将其插入到其指定页面中为止，它一直起作用。

我怀疑它是在1993年编写的，因为Brendan Eich直到1995年才发明JS。en.wikipedia.org/wiki/Javascript#History ;-)我强烈建议使用document.getElementById并剥离其他内容。

我认为至少要先在IE中运行它，然后再处理浏览器兼容性，这才是明智的选择，否则他不会知道他的浏览器兼容性问题是否会得到解决，因为它仍然无法正常工作。

最好使用标准的DOM技术使其正常工作，然后再没有任何浏览器兼容性问题要谈：-)

我有一个智能的功能回叫按钮代码：

Ahhhh

愚蠢的方式：

οnclick="javascript:CapacityChart();"

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

我尝试了这个，但仍然得到相同的结果-什么都没有。

@erenon：哦，拜托。这不是他的问题，表示法非常好，没有理由仅为了分配一个onclick事件而进入复杂的绑定和框架。

感谢您参加我的防守Pekka。我只希望一个简单的按钮即可正常运行。

onclick事件中不需要javascript:协议。 onclick事件已经是javascript。 javascript:协议用于在链接的href属性中执行javascript。