title: Why is JS code decrementing like number (as expected) but incrementing/concatenating like a string when button is clicked
body: <p>I have this snippet of code which has to increment and decrement <code>onclick</code> by 10. It works fine when decremented but starts concatenating when incremented so the result looks like <code>1010101010</code>. I just don't understand why this is happening.</p>
  <p>JS</p>
  <pre><code> &lt;div class=&quot;container&quot;&gt;  
    &lt;div class=&quot;input-container&quot;&gt;
      &lt;div id=&quot;minus&quot;&gt;-&lt;/div&gt;
      &lt;input type=&quot;text&quot; id=&quot;number&quot; value=&quot;0&quot;&gt;
      &lt;div id=&quot;plus&quot;&gt;+&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>HTML</p>
  <pre><code>(function(){
  
    let inputContainer = document.querySelector(&quot;.input-container&quot;);
    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(&quot;click&quot;, changeNumber);
  })();
  </code></pre>
  <p>How can I fix it?</p>
  <hr />
  <p>Here is the solution using <code>parseInt()</code>!</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;  
    &lt;div class=&quot;input-container&quot;&gt;
      &lt;div id=&quot;minus&quot;&gt;-&lt;/div&gt;
      &lt;input type=&quot;text&quot; id=&quot;number&quot; value=&quot;0&quot;&gt;
      &lt;div id=&quot;plus&quot;&gt;+&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>(function(){
  
    let inputContainer = document.querySelector(&quot;.input-container&quot;);
    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(&quot;click&quot;, changeNumber);
  })();
  </code></pre>