title: HTML input type="number" still returning a string when accessed from javascript
body: <p>I'm new to javascript , I'm trying learning how functions etc in JS and trying to add 2 numbers</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;JS ADD&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;h1&gt;Funcitons is JS&lt;/h1&gt;
  
  
    &lt;input type="number" id="num1"&gt;
    &lt;input type="number" id="num2"&gt;
  
    &lt;button type="button" onclick="addNumAction()"&gt;
      Add
    &lt;/button&gt;
  
    &lt;script&gt;
      function addNum(n1, n2) {
        return parseInt(n1) + parseInt(n2);
      }
  
      function addNumAction() {
        var n1 = document.getElementById("num1").value;
        var n2 = document.getElementById("num2").value;
  
        var sum = addNum(n1, n2);
        window.alert("" + sum);
  
      }
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I remove the parseInt() the value is treated as a string only , then what is the point of using <code>&lt;input type="number"&gt;</code> ?please explain to me.
  what field to use for getting input as a number?</p>