gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 18:03:27 26 4
gpt4 key购买 nike

我正在尝试制作一个带有 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的 fiddle :http://jsfiddle.net/rPCYf/我将像往常一样代表并批准每一个有用的帖子!提前致谢!

最佳答案

当您将 jsfiddle 中的换行选项从“onLoad”更改为“nowrapp - in”时,它将起作用。

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

// no code changed

This answer对其进行解释并为您提供更多选择。

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

并且,另一个建议,使用“onchange”而不是“onkeyup”来监视输入字段中的更改(理想情况下,不使用 html 属性,而是使用组绑定(bind))...请参见此处(我只更改了前两个字段):http://jsfiddle.net/rPCYf/2/

摘要

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

关于Javascript 函数不会加载到 onkeyup 和 onclick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20314681/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com