title: Input.value returns NaN
body: <p>If someone can help me because I have no clue why I always have NaN in console. Everything seems to be ok.
  The code should get value of input and do simple calculations. Unfortunetely I've received NaN so I decided to use console.log to explore values and it explained me that value of every input is NaN. 
  I think that solution is obvious but I am newbie and I have been wondering what is my mistake for 2 hours.</p>
  
  <pre><code>  &lt;div id="wrapper"&gt;
          &lt;section&gt;
              &lt;h2&gt;Give width of tile&lt;/h2&gt;
              &lt;input id =width type="number"/&gt;
              &lt;h2&gt;Give height of tile&lt;/h2&gt;
              &lt;input id =height type="number"/&gt;
              &lt;h2&gt;Price of one tile&lt;/h2&gt;
              &lt;input id =price type="number"/&gt;
          &lt;/section&gt;
          &lt;section&gt;
              &lt;h2&gt;Surface&lt;/h2&gt;
              &lt;input id = "surface" type="number"/&gt;
              &lt;button id="calculate"&gt;Calculate&lt;/button&gt;
          &lt;/section&gt;
          &lt;section&gt;
              &lt;p&gt;The price is:&lt;/p&gt;
              &lt;div id="result"&gt;
  
              &lt;/div&gt;
          &lt;/section&gt;
  
      &lt;/div&gt;   
  
      &lt;script src="main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>   document.addEventListener("DOMContentLoaded", function(event) { 
  
      var width = parseInt(document.getElementById("width").value);
      var height = parseFloat(document.getElementById("height").value);
      var price= parseFloat(document.getElementById("price").value);
      var surface= parseFloat(document.getElementById("surface").value);
      var calculate= document.getElementById("calculate");
      var result= document.getElementById("result");
  
  
  
      calculate.addEventListener("click", function(){
  
          console.log(width);
          console.log(height);
          console.log(price);
          console.log(surface);
  
          var surfaceTile = parseFloat(width * height);
          price = parseFloat(price).toFixed(2);
  
          var numberTiles = (Math.ceil(surface/surfaceTile)).toFixed(2);
          var cost = numberTiles * price;
          result.innerText = cost;
      });
  
  });
  </code></pre>