title: javascript get x and y coordinates on mouse click
body: <p>I have a little div tag that when I click on it (<code>onClick</code> event), it will run the <code>printMousePos()</code> function.</p>
  <p>These are the <code>HTML</code> tags:</p>
  <pre><code>&lt;html&gt;
      &lt;header&gt;
          &lt;!-- By the way, this is not the actual html file, just a generic example. --&gt;
          &lt;script src='game.js'&gt;&lt;/script&gt;
      &lt;/header&gt;
      &lt;body&gt;
          &lt;div id=&quot;example&quot;&gt;
              &lt;p id=&quot;test&quot;&gt;x: , y:&lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This is the <code>printMousePos</code> function in a seperate .js file:</p>
  <pre><code>function printMousePos() {
      var cursorX;
      var cursorY;
      document.onmousemove = function(e){
      cursorX = e.pageX;
      cursorY = e.pageY;
  }
      document.getElementById('test').innerHTML = &quot;x: &quot; + cursorX + &quot;, y: &quot; + cursorY;
  }
  </code></pre>
  <p>Yes, the function actually works (it knows when you click it and all), but it returns <code>undefined</code> for both <code>x</code> and <code>y</code>, so I'm assuming that the getting <code>x</code> and <code>y</code> logic in the function is incorrect. Any Ideas? I also know there aren't any built-in functions within javascript itself to return the <code>x</code> and <code>y</code> like in java, ex. would there be a way to do it with say JQuery or PHP? (avoid those if possible though, javascript would be best). Thanks!</p>