Question

我正在尝试使用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/ 我会照常批准每一个有用的帖子！提前谢谢！

Answer 1

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

见这里：http://jsfiddle.net/rPCYf/1/

// no code changed

This answer解释了它并为您提供了更多选择。

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

并且，另一个建议，使用“onchange”而不是“onkeyup”来观察输入字段的变化（理想情况下，不使用html属性，但是组绑定）...看到这里（我改变了前两个）字段）：http://jsfiddle.net/rPCYf/2/

概要

将jsfiddle wrap选项更改为“no wrap ...”
阻止提交按钮默认操作（最简单的方法是在onclick调用中返回false）
考虑使用更改侦听器而不是keyup侦听器，因为这将处理按键，按钮单击，鼠标滚轮操作等...这是一种更自然的方法来实现所需的行为。
按类对相应的输入字段进行分组，并以这种方式绑定事件侦听器，而不是为每个实例使用HTML属性 - 它将使您的代码更具可读性和可维护性

Answer 2

您已选择“onload”作为JSFiddle中JS的包装器。这会将所有JS包装在load事件触发时调用的函数中。

这一结果（通常是需要的）是你的函数不再是全局的。

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

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

addEventListener('keypress', calc);

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

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

2 个答案: