title: Javascript: Get Typeerror - element is null
body: <p>I have a BMI calculator in Wordpress, that get's the </p>
  
  <p>Typeerror:</p>
  
  <blockquote>
    <p>result is null and
    health is null</p>
  </blockquote>
  
  <p>The calculator works fine in fiddle <a href="https://jsfiddle.net/2au9y34x/2/" rel="nofollow noreferrer">https://jsfiddle.net/2au9y34x/2/</a>
  but don't on Wordpress. I have placed the script in the footer, so that the HTML is read first, so that is not where the problem is. 
  Can anyone help solve this problem?</p>
  
  <p>Javascript is: </p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
    var form = document.querySelector('form[name=bmi]');
    var onSubmit = function(event) {
  
      event.preventDefault();
      var healthMessage;
  
      var result = form.querySelector('.result');
      var health = form.querySelector('.health');
  
      var weight = parseInt(form.querySelector('input[name=weight]').value, 10);
      var height = parseInt(form.querySelector('input[name=height]').value, 10);
  
      var bmi = (weight / (height / 100 * height / 100)).toFixed(1);
  
      if (bmi &lt; 18.5) {
        healthMessage = 'undervægtig';
      } else if (bmi &gt; 18.5 &amp;&amp; bmi &lt; 25) {
        healthMessage = 'normal vægtig';
      } else if (bmi &gt; 25) {
        healthMessage = 'overvægtig';
      }
      result.innerHTML = bmi;
      health.innerHTML = healthMessage;
    }
    form.addEventListener('submit', onSubmit, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;form name="bmi"&gt;
    &lt;h1&gt;Mål dit BMI:&lt;/h1&gt;
    &lt;label&gt;
      &lt;input type="text" name="weight" id="weight" placeholder="Vægt (kg)"&gt;
      &lt;input type="text" name="height" id="height" placeholder="Højde (cm)"&gt;
      &lt;input type="submit" name="submit" id="submit" value="Udregn BMI"&gt;
      &lt;/label&gt;
    &lt;div class="calculation"&gt;
      &lt;div&gt;
        Dit BMI er: &lt;span class="result"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div&gt;
        Dette betyder at du er: &lt;span class="health"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>