JavaScript 計算器不更新值

Question

我的 JavaScript 計算器有問題。 例如，每當我想添加 5+5 時，結果都會保持在 10（阻止一個值）並且不會添加到前一個結果（10、15、20 等）。

這是我的代碼：

 function add() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a + b); document.getElementById('result').value = +c; } function sub() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a - b); document.getElementById('result').value = +c; } function mult() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a * b); document.getElementById('result').value = +c; } function div() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a / b); document.getElementById('result').value = +c; } function divmod() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a % b); document.getElementById('result').value = +c; }

 <form name="calculator"> <input type="text" id="l1" /> <input type="text" id="l2" /> <br/> <input type="button" value="+" onclick="add()" /> <br/> <input type="button" value="-" onclick="sub()" /> <br/> <input type="button" onclick="mult()" /> <br/> <input type="button" value="%" onclick="divmod()" /> <input type="button" value="/" onclick="div()" /> <br/> <input type="button" value="clean" class="class2" /> <br/> <p style="color:white; font-size:30px;">Result:</p> <input type="text" id="result" /> <br/> </form>

問題出在哪兒？ 我試圖加載+之前=在document.getElementById('result').value = +c ，但它沒有更新該值然后，但加入5 + 5為55 。

Answer 1

雖然+c在正確的軌道上（將 c 轉換為數字），但 c 已經是一個數字，它是 parseInt() 的結果。 你得到 55 的原因是因為它是連接字符串，而不是添加數字（JS 可能很時髦，因為它不是一種強類型語言）。 Javascript 的類型強制有時可能是一個很大的痛苦！

我相信獲取 result 的值，將其轉換為整數，將c添加到該整數，然后設置 DOM 元素值將獲得您正在尋找的行為。

我故意含糊其辭，因為我相信您已經從上面的代碼采樣中證明了您擁有執行此操作的知識和工具。 如果經過更多努力后仍然無法正常工作，請對此答案發表評論，我將提供更深入的解決方案。

Answer 2

您需要通過首先將值解析為 int 來添加數字：

document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;

僅使用 a = newValue ，即可將 result 的值更改為c變量。
只有一個+= newValue ，這是連接，因為 document.thing.value 將始終返回一個字符串，而字符串 + 數字將數字提升為字符串。
所以你需要說oldStringValue = parseInt(oldStringValue) + newNumberValue;

result 的值也需要通過 HTML 或 JavaScript 初始化為 0，否則 parseInt() 將返回 NaN。 我選擇在 JavaScript 中進行，因為這樣更清楚。

 document.getElementById('result').value = 0; function add() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a + b); document.getElementById('result').value = parseInt(document.getElementById('result').value) + c; } function sub() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a - b); document.getElementById('result').value = parseInt(document.getElementById('result').value) + c; } function mult() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a * b); document.getElementById('result').value = parseInt(document.getElementById('result').value) + c; } function div() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a / b); document.getElementById('result').value = parseInt(document.getElementById('result').value) + c; } function divmod() { var a = parseInt(document.getElementById('l1').value); var b = parseInt(document.getElementById('l2').value); var c = parseInt(a % b); document.getElementById('result').value = parseInt(document.getElementById('result').value) + c; }

 <form name="calculator"> <input type="text" id="l1" /> <input type="text" id="l2" /> <br/> <input type="button" value="+" onclick="add()" /> <br/> <input type="button" value="-" onclick="sub()" /> <br/> <input type="button" onclick="mult()" /> <br/> <input type="button" value="%" onclick="divmod()" /> <input type="button" value="/" onclick="div()" /> <br/> <input type="button" value="clean" class="class2" /> <br/> <p style="color:white; font-size:30px;">Result:</p> <input type="text" id="result" /> <br/> </form>