title: Passing a variable to a function through a button (HTML/Javascript)
body: <p>I'm attempting to create a page that will allow me to select from a series of images, with the option of choosing your own via URL, but I have stumbled on an issue. I am attempting to use buttons placed under the sample images to change the source image that is piped into a function, but I can't seem to get it to work. Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function updateImage(imageUsed)
  {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.drawImage(imageUsed,0,0,500,500);
  }
  &lt;/script&gt;
  &lt;style&gt;
  #header
  {
      background-color:brown;
      color:black;
      text-align:center;
      padding:5px;
  }
  
  #defaultSelection
  {
      line-height:30px;
      background-color:#eeeeee;
      width:200px;
      float:left;
      padding:5px;
      text-align:center;
  }
  
  #canvasID
  {
      background-color:grey;
      width:1000px;
      float:left;
      padding:10px; 
      text-align:center;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body"&gt; 
  &lt;div id="header"&gt;
  &lt;h1&gt; Welcome&lt;/h1&gt;
  &lt;h2&gt;Please select an image, or upload your own below.&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="defaultSelection"&gt;
  &lt;img id="Image1" src="Image1.jpg" style="width:128px;height:128px"&gt;
  &lt;br&gt;
  &lt;button onclick="updateImage(Image1)"&gt;Use this image&lt;/button&gt;
  &lt;br&gt;
  &lt;img id="Image2" src="Image2.jpg" style="width:128px;height:128px"&gt;
  &lt;br&gt;
  &lt;button onclick="updateImage(Image2)"&gt;Use this image&lt;/button&gt;
  &lt;br&gt;
  &lt;img id="Image3" src="Image3.jpg" style="width:128px;height:128px"&gt;
  &lt;br&gt;
  &lt;button onclick="updateImage()"&gt;Use this image&lt;/button&gt;
  &lt;br&gt;
  &lt;img id="Image4" src="Image4.jpg" style="width:128px;height:128px"&gt;
  &lt;br&gt;
  &lt;button onclick="updateImage()"&gt;Use this image&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="canvasID"&gt;
  &lt;canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3; background-color:white;"&gt;
  &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Does anyone know why it might not be passing the images through? They display correctly on the page, so I know the source is correct, but they don't seem to want to be passed to the function.</p>