title: How to access HTML INPUT in JavaScript?
body: <p>I wrote a simple function in JS to calculate the area of triangles. When I assign numbers directly to variables it works fine. But when I assign the variable to get values from HTML INPUT it works crazy and the output is large numbers. I show both scenarios below;
  I used this formula to calculate the area of triangles:
  <a href="https://i.stack.imgur.com/aSh6J.png" rel="nofollow noreferrer">Image for the formula.</a>`</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
    function triangleArea() {
      var side1 = document.getElementById("a").value;
      var side2 = document.getElementById("b").value;
      var side3 = document.getElementById("c").value;
      var s = (side1 + side2 + side3) / 2;
      var area = Math.sqrt(s * ((s - side1) * (s - side2) * (s - side3)));
      document.getElementById('resultOfTriangle').innerHTML = area;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;4. Write a JavaScript program to find the area of a triangle where lengths of the three of its sides are 5, 6, 7&lt;/h2&gt;
  &lt;p&gt;a: &lt;input type="number"  id="a" value="5" &gt;&lt;/p&gt;
  &lt;p&gt;b:  &lt;input type="number"  id="b" value="6"&gt;&lt;/p&gt;
  &lt;p&gt;c: &lt;input type="number" id="c" value="7" &gt;&lt;/p&gt;
  &lt;button type="button" onclick="triangleArea()"&gt;Try&lt;/button&gt;
  &lt;p&gt;Area is: &lt;span id="resultOfTriangle"&gt;&lt;/span&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>`Here when i assign the variables directly, it works fine.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
    function triangleArea() {
      var side1 = 5;
      var side2 = 6;
      var side3 = 7;
      var s = (side1 + side2 + side3) / 2;
      var area = Math.sqrt(s * ((s - side1) * (s - side2) * (s - side3)));
      document.getElementById('resultOfTriangle').innerHTML = area;
    }
  
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;4. Write a JavaScript program to find the area of a triangle where lengths of the three of its sides are 5, 6, 7&lt;/h2&gt;
  &lt;p&gt;a: &lt;input type="number"  id="a" value="5"&gt; &lt;/p&gt;
  &lt;p&gt;b:  &lt;input type="number"  id="b" value="6"&gt; &lt;/p&gt;
  &lt;p&gt;c: &lt;input type="number" id="c" value="7"&gt; &lt;/p&gt;
  &lt;button type="button" onclick="triangleArea()"&gt;Try&lt;/button&gt;
  &lt;p&gt;Area is: &lt;span id="resultOfTriangle"&gt;""&lt;/span&gt; &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>