[英]JavaScript – Problems with Reset button on calculator
我有一个简单的计算器,我希望在单击重置按钮时重置两个文本字段,但由于某种原因它不起作用。 我参考了其他 Stack Overflow 查询,但有些使用 jQuery。 有没有办法在没有 jQuery 的情况下做到这一点? 无论如何,这里是 JSFiddle: http : //jsfiddle.net/jsdmLr7b/
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementByID('inputLeft').innerHTML.value = "";
document.getElementByID('inputRight').innerHTML.value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
尝试这个:
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementById("leftInput").value = "";
document.getElementById("rightInput").value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
你的问题是你在文档上调用 getElementByID 。 调用它的正确方法是 getElementById 在“Id”中带有小写的“d”。
此外,您引用了错误的 id 值。 它们是 leftInput 和 rightInput,而不是 inputLeft 和 inputRight。 在查看代码数小时后,很容易忽略措辞和区分大小写!
我将重置功能切换为使用.value = "";
因为在这种情况下它更有意义,应该用于输入/表单操作,而 innerHTML 用于其他元素(div、span、td 等)
您还可以通过将其添加到 reset() 函数来清除您的总数:
document.getElementById("inputTotal").innerHTML = "";
在这种情况下,您希望使用 innerHTML,因为您的值不在输入/表单操作中。 这是更新的JSFiddle 。
我找到了一个非常简单的解决方案,只需将您的所有输入都包裹在 FORM 标签中,您的重置按钮就可以正常工作了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.