JavaScript - 计算器上的重置按钮问题

时间:2015-07-26 19:19:32

标签: javascript

我有一个简单的计算器,我希望在单击重置按钮时重置两个文本字段,但由于某种原因它无法正常工作。我引用了其他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>

2 个答案:

答案 0 :(得分:1)

试试这个:

<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

答案 1 :(得分:0)

我发现了一个非常简单的解决方案,只需将所有输入都包裹在FORM标签中,您的“重置”按钮就可以正常工作