title: Uncaught reference error: image not defined
body: <p>When I run this in google chrome (or any other browser) I get the error
      Uncaught ReferenceError: image is not defined</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {background-color:lightgrey}
  &lt;/style&gt;
  &lt;title&gt;Play Pixel Draw&lt;/title&gt;
  &lt;h1&gt;Pixel Draw!&lt;/h1&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;Click on the white squares to change that square blue. Make whatever you want!&lt;/p&gt;
  &lt;hr&gt;
  &lt;img id="first" onclick="changeImage()" src="square1.png" width="50" height="50"&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function changeImage() {
  var square = document.getElementById('first');
  if (image.src.match("square1.png")) {
      image.src = "squareblue1.jpg";
  } else {
      image.src = "square1.png";
  }
  }
  </code></pre>
  
  <p>Assuming that all of the pictures are in the right place, how can I fix this?</p>