title: Display image position based on mouse click coordinates
body: <p>I start with a blank page, and the user is supposed to click anywhere on the page to make an image pop up. I'm trying to display an image at the exact coordinates of where a user clicks within a page.
  I am able to get an image to pop up in the corner whenever/wherever the user clicks. I am also able to gather the x and y coordinates of where the mouse clicks within a page, but in making those coordinates the coordinates of the image, I'm having trouble. With the code I have below, when the user clicks anywhere within the window, the image of a snowball appears in the upper left hand corner, and the x coordinates of the click are displayed. (Clicking more changes the x coordinate displayed with each click). My question is, how do I get the snowball to appear at the click coordinates?</p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
      document.onclick = userClicked;
      function userClicked() {
  
          var x = event.clientX;
          var y = event.clientY;
          document.getElementById("xCoord").innerHTML=x;
          document.getElementById("snowballAppear").style.display = '';
      }
  
  &lt;/script&gt;
  
  &lt;div class "container"&gt;
      &lt;div class "picture"&gt;
          &lt;img alt="snowballAppear" id="snowballAppear" style="display: none" src="http://vignette3.wikia.nocookie.net/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p></p>
  
  </p>
  
  <p></p>
  
  
  
  <p></p>