title: Simple Javascript rectangle area function
body: <p>I'm writing a simple function to calculate the area of a rectangle...</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;form id="rectangleForm" method="post"&gt;
  &lt;h1&gt;Calculate the area of a rectangle:&lt;/h1&gt;
  &lt;div&gt;
      &lt;label for="width"&gt;Width&lt;/label&gt; 
      &lt;input type="text" name="width" id="width" value="1.00" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label for="height"&gt;Height&lt;/label&gt;
      &lt;input type="text" name="height" id="height" value="1.00"/&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label for="area"&gt;Area&lt;/label&gt;
      &lt;input type="text" name="area" id="rectarea" value="0.00" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;input type="submit" value="Calculate" id="submit" /&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;script&gt;
  
  function rectangle() {
  'use strict';
  var area;
  var width = document.getElementById('width').value;
  var height = document.getElementById('height').value;
  total = width * height;
  document.getElementById('area').value = total;
  return false;
  }          
  
  function init() {
     'use strict';
     var rectangleForm = document.getElementById('rectangleForm');
     rectangleForm.onsubmit = rectangle();
  }
  
  window.onload = init();
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm getting an "uncaught typeError: cannot read the property 'value' of null." error on the var width line. I don't understand why. Can anyone shed any details or solutions?  </p>