使用 HTML 按钮调用 JavaScript 函数

IT技术 javascript html
2021-01-25 00:52:50

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

这是代码:

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

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

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

6个回答

有几种方法可以使用 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 种方法将允许您将任意数量的函数附加到同一个事件处理程序,即使也使用了第一种或第二种方法。

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

CapacityWindow.document.write(s);

请尝试以下操作:

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

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

使用jquery,还有: $("#clickMe").bind('click', function () { alert('hello!'); };)
2021-03-22 00:52:50

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

如果使用 jQuery,您可以执行以下操作:

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

<input type="button" value="Capacity Chart" id="MyButton" >
同意。在许多情况下,jQuery 和其他框架对于少量的 javascript 来说完全是矫枉过正,而且并非所有的 javascript 代码都需要跨浏览器。
2021-03-16 00:52:50
足够公平..我试图提出的观点是“一种更好的方法”是不显眼的......没有jQuery,类似: var btn = document.getElementById('MyButton'); btn.onclick = function(){CapacityChart();}
2021-03-17 00:52:50
这些使用 jQuery 的人似乎准备将它用于所有网络。使用平面 JavaScript 怎么样?天哪,jQuery 现在真的让我很紧张。哈哈!我称之为懒人创建网络的方式,因为我想这就是它真正的全部内容。
2021-03-19 00:52:50
@DrLouie:我对 jQuery 一无所知,它是许多问题的一个很好的解决方案,但是当它没有被标记或被 OP 询问时,任何提及 jQuery 的内容也应该通过非 jQuery 方法来辅助,否则他们会冒风险a) 混淆提问者 - 他可能不知道 jQuery 是什么或 b) 通过告诉提问者使用 jQuery 来处理几行 javascript 代码来惹恼提问者。@Paul - 我必须说这不是一本好书......
2021-03-19 00:52:50
道歉...发布错误链接 - 旨在发布一个stackoverflow。stackoverflow.com/questions/1588374/...
2021-04-05 00:52:50

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

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

编辑:

看起来document.all是 IE-only 的东西,是访问 DOM 的非标准方式。如果您使用document.getElementById(),它应该可以工作。例子:document.getElementById("RUnits").value代替document.all.Capacity.RUnits.value

这不是函数的具体问题,它不会在 IE 中引发任何错误
2021-03-15 00:52:50

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

正如您所知,当您调用该函数时,分号 ( ; ) 不应该出现在按钮中。

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

那么一切都应该有效:)