I have this snippet of code which has to increment and decrement onclick by 10. It works fine when decremented but starts concatenating when incremented so the result looks like 1010101010. I just don't understand why this is happening.

JS

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

HTML

(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);
})();

How can I fix it?

Here is the solution using parseInt()!

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>

JS

(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);
})();