Javascript函数不会加载到onkeyup和onclick事件

Javascript function does NOT load to onkeyup and onclick events

本文关键字：onkeyup onclick 事件 加载 函数 Javascript      更新时间：2023-12-31

我正试图制作一个有4个选项（/*+-）的简单计算器，但不知何故，我的onclick和onkeyup事件拒绝工作。我尝试了各种方法来使我的事件工作（添加preventDefault，返回false），然后我放弃了，因为我无法修复它。如果你不介意，请帮帮我！

HTML:

<body>
<div id="wrap">
  <div id="header">
      <h1>Simple Calculator</h1>
<form name="form" id="form"> 
    <input type="number" name="addta1" onkeyup="calc();"/>
  <span id="plusadd">+</span>
    <input type="number" name="addta2" onkeyup="calc();"/>
    =
    <span id="addresult"></span> 
    <br/>
    <input type="number" name="subta1" onkeyup="calc();"/>
    -
    <input type="number" name="subta2" onkeyup="calc();"/>
    =
    <span id="subresult"></span>
    <br/>
    <input type="number" name="multa1" onkeyup="calc();"/>
    *
    <input type="number" name="multa2" onkeyup="calc();"/>
    =
    <span id="mulresult"></span>
    <br/>
    <input type="number" name="divta1" onkeyup="calc();"/>
    /
    <input type="number" name="divta2" onkeyup="calc();"/>
    =
    <span id="divresult"></span>
    <br/>
  <div class="buttonwrap">
  <input onclick="calc();" type="submit" value="Submit" name="submit" method="post"/>
  <input type="reset" value="Reset" name="reset"/>
  </div>
</form>
  </div>
  </div>
  </body>

Javascript：

function calc() {
var addOne = parseInt(document.form.addta1.value);
var addTwo = parseInt(document.form.addta2.value);
var subOne = parseInt(document.form.subta1.value);
var subTwo = parseInt(document.form.subta2.value);
var mulOne = parseInt(document.form.multa1.value);
var mulTwo = parseInt(document.form.multa2.value);
var divOne = parseInt(document.form.divta1.value);
var divTwo = parseInt(document.form.divta2.value);
var addResult = addOne + addTwo
var subResult = subOne - subTwo
var mulResult = mulOne * mulTwo
var divResult = divOne / divTwo
document.getElementById('addresult').innerHTML = addResult;
document.getElementById('subresult').innerHTML = subResult;
document.getElementById('mulresult').innerHTML = mulResult;
document.getElementById('divresult').innerHTML = divResult;
}

下面是一个对CSS的篡改：http://jsfiddle.net/rPCYf/我会像往常一样代表并批准每一个有用的帖子！提前感谢！

当您将jsfiddle中的wrap选项从"onLoad"更改为"no wrap-in"时，它将起作用。

请参见此处：http://jsfiddle.net/rPCYf/1/

// no code changed

这个答案解释了这一点，并为您提供了更多的选择。

您的提交按钮需要返回false，以防止刷新页面（或使用任何其他方法）。

另一个建议是，使用"onchange"而不是"onkeyup"来观察输入字段中的更改（理想情况下，不使用html属性，而是使用组绑定）。。。请参阅此处（我只更改了前两个字段）：http://jsfiddle.net/rPCYf/2/

总结

  • 将jsfiddle换行选项更改为"无换行…"
  • 阻止提交按钮的默认操作（最简单的方法是在onclick调用中返回false）
  • 考虑使用change监听器而不是keyup监听器，因为这将处理按键、按钮点击、鼠标滚轮操作等。这是实现所需行为的更自然的方法
  • 例如，通过一个类对适当的输入字段进行分组，并以这种方式绑定事件侦听器，而不是为每个实例使用HTML属性，这将使代码更具可读性和可维护性

您选择了"onload"作为JSFiddle中JS的包装器。这将所有JS封装在一个函数中，该函数在加载事件触发时调用。

这样做的一个结果（通常是所希望的）是，您的函数不再是全局函数。

由于它们不是全局的，它们超出了您的内在事件属性的范围。

用JavaScript而不是HTML属性绑定事件处理程序。

addEventListener('keypress', calc);

http://jsfiddle.net/rPCYf/3/

相关文章：