javascript - 保存值并添加到它

Question

有几种方法可以提出这个问题，我尝试使用最简单的方法。基本上，我有两个字段......一个是加数字，另一个是减数字。我想要的是，当一个数字输入到其中一个时(我们现在只使用添加输入)，并在按下“+”按钮后让它在底部更新。我希望该结果保留在底部，因此当将新值放入添加框中并按下按钮时，它会添加到之前的总计中。对于我的一生，我无法弄清楚这一点。一旦解决了，我会自己处理减法，只需要朝正确的方向插入即可。目前的代码如下。

<div id="entire">
  <div id="content">
    <input type="number" id="addInput" placeholder="0">
    <button type="button" id="addBtn" onclick="add()">+</button>
    <br>
    <br> 
    <input type="number" id="subInput" placeholder="0">
    <button type="button" id="subBtn" onclick="sub()">-</button>
    <br>
    <br>
    <div id="totalAmt"></div>
    <br>
    <input type="button" id="clear" onclick="clearFields()" value="Clear">

    <input type="button" id="reset" onclick="reset()" value="Reset">
  </div>
</div>

function add() {
  var addInput = document.getElementById("addInput").value;
  var emptyValue = "";
  var total = emptyValue + addInput;
  document.getElementById("totalAmt").innerHTML = total;
}

function clearFields() {
  document.getElementById("addInput").value = "";
  document.getElementById("subInput").value = "";
}

function reset() {
  document.getElementById("totalAmt").innerHTML = "";
}

我的代码笔的链接如下:

http://codepen.io/0ktane/pen/NNdbOq

Answer 1

你的问题是这两行

var emptyValue = "";
var total = emptyValue + addInput;

当您连接到字符串时，您会得到一个字符串。

此外，您甚至没有首先考虑之前的值。

试试这个，已更新 pen

function add() {
  var addInput = parseInt(document.getElementById("addInput").value); //parse the value to an integer first
  var totalAmt = parseInt(document.getElementById("totalAmt").innerHTML); //parse the value to an integer first
  totalAmt = isNaN(totalAmt) ? 0 : totalAmt; //if the value is NaN(not a number) reset it to 0
  addInput = isNaN(addInput) ? 0 : addInput;//if the value is NaN(not a number) reset it to 0
  document.getElementById("totalAmt").innerHTML = totalAmt + addInput ; //output the correct value
}