为什么JS点击按钮数值减量正常、增量却变成字符串拼接，如何修复？

问题表现 #

实现点击按钮对数值进行±10运算时，减量操作符合预期，但增量操作触发字符串拼接，得到类似1010101010的异常结果。

问题代码 #

HTML #

<div class="container">  
  <div class="input-container">
    <div id="minus">-</div>
    <input type="text" id="number" value="0">
    <div id="plus">+</div>
  </div>
</div> 

JavaScript #

(function(){
  let inputContainer = document.querySelector(".input-container");
  let input = inputContainer.firstElementChild.nextElementSibling;
  let minus = inputContainer.firstElementChild;
  let plus = inputContainer.lastElementChild;
  function changeNumber(e) {
      if(e.target === minus) {
          input.value -= 10;
      } else if(e.target === plus) {
          input.value += 10;
      }
  }
  inputContainer.addEventListener("click", changeNumber);
})();

修复方案（使用parseInt()） #

HTML代码与上方一致，修改后的JavaScript代码如下：

(function(){
  let inputContainer = document.querySelector(".input-container");
  let input = inputContainer.firstElementChild.nextElementSibling;
  let minus = inputContainer.firstElementChild;
  let plus = inputContainer.lastElementChild;
  function changeNumber(e) {
      if(e.target == minus) {
          let inputNumber = parseInt(input.value);
        input.value = inputNumber - 10;
      } else if(e.target == plus) {
          let inputNumber = parseInt(input.value);
        input.value = inputNumber + 10;
      }
  }
  inputContainer.addEventListener("click", changeNumber);
})();

原因说明 #

input元素的value属性默认是字符串类型，-=运算符会自动将字符串转换为数字进行运算，而+=会优先触发字符串拼接逻辑，因此需要先用parseInt()将value转为数值类型再进行运算。

内容的提问来源于stack exchange，提问作者junior_dev