title: property 'addEventListener' of null on mouseover
body: <p>I have a button on my page that when I mouse over I would like to change to the background color to red. I am getting this error:</p>
  
  <p>Cannot read property 'addEventListener' of null</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button type="button" id="dev" onclick="visibility()"&gt;Visibility&lt;/button&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var ditto = document.getElementById("dev");
  ditto.addEventListener("mouseover", buttonColor);
  
  function buttonColor(){
      document.getElementById("dev").style.backgroundColor = "red";
  }
  </code></pre>
  
  <p>here's what I thought I was doing:</p>
  
  <p>created a variable for the specific element i wanted. Then add an eventlistener to that element for "mouseover" that would call the function buttonColor. buttonColor would change background color of button.</p>
  
  <p>what did I do wrong?</p>
  
  <p>edit: my js is an external file.
  I have to use the add event lisenter for a homework objective.</p>