title: document.querySelector doesn't work in .js file
body: <p>If <code>var raster = document.querySelector ("canvas")</code> is in the HTML file, raster is defined and declared.  However, I'd like to have everything in my js file, only function calls in my HTML.  When I try putting <code>var raster...</code> in the .js file, it keeps coming up <code>null</code>.</p>
  
  <p>Is there any way to have <code>document.querySelector</code> point to the associated HTML file?</p>
  
  <pre><code>// this doesn't work
  //var raster = document.querySelector ("canvas").getContext ("2d");
  
  function drawSquare (w,h) {
  
  raster.fillStyle = "blue";
  raster.fillRect (0,0,w,h);
  }
  </code></pre>
  
  
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;IFS&lt;/title&gt;
          &lt;script src="IFS.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;canvas width="500" height="500"&gt;&lt;/canvas&gt;
          &lt;script&gt;var raster = document.querySelector ("canvas").getContext ("2d");
          drawSquare (500,500);&lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>