title: Show mouse x and y position with JavaScript
body: <p>First version does not show me x and y and get I get following error:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'pageX' of undefined</p>
  </blockquote>
  <p>The Second version works but is very similar coded, can't find the problem.</p>
  <p>FIRST VERSION (NOT WORKING)</p>
  <pre><code>    &lt;form name =&quot;show&quot;&gt;
          &lt;input type=&quot;text&quot; name=&quot;mouseXField&quot; value=&quot;0&quot; size=&quot;6&quot;&gt;Mouse X Position&lt;br&gt;
          &lt;input type=&quot;text&quot; name=&quot;mouseYField&quot; value=&quot;0&quot; size=&quot;6&quot;&gt;Mouse Y Position&lt;br&gt;
      &lt;/form&gt;
          
          &lt;script type=&quot;text/javascript&quot;&gt;
          
          var mie = (navigator.appName == &quot;Microsoft Internet Explorer&quot;) ? true : false;
          
          if (!mie) {                
              document.captureEvents(Event.MOUSEMOVE);
              document.captureEvents(Event.MOUSEDOWN);
          }
                      
          document.onmousemove = mousePos();
          document.onmousedown = mouseClicked();
          
          var mouseClick;
          var keyClicked;
          
          var mouseX = 0;
          var mouseY = 0;
          
          function mousePos (e) {                
              if (!mie) {
                  mouseX = e.pageX; 
                  mouseY = e.pageY;
              }
              else
                  mouseX = event.clientX + document.body.scrollLeft;
                  mouseY = event.clientX + document.body.scrollTop;
                     
          document.show.mouseXField.value = mouseX;
          document.show.mouseYField.value = mouseY;
          
          return true;
          }
          
          &lt;/script&gt; 
  </code></pre>
  <p>SECOND VERSION (WORKING)</p>
  <pre><code>      &lt;form name=&quot;Show&quot;&gt;
              &lt;input type=&quot;text&quot; name=&quot;MouseX&quot; value=&quot;0&quot; size=&quot;4&quot;&gt; X&lt;br&gt;
              &lt;input type=&quot;text&quot; name=&quot;MouseY&quot; value=&quot;0&quot; size=&quot;4&quot;&gt; Y&lt;br&gt;
        &lt;/form&gt;
  
          &lt;script type=&quot;text/javascript&quot;&gt;
  
              var IE = document.all?true:false
  
              if (!IE) document.captureEvents(Event.MOUSEMOVE)
  
              document.onmousemove = getMouseXY;
  
              var tempX = 0
              var tempY = 0
  
              function getMouseXY(e) {
                  if (IE) {       
                  tempX = event.clientX + document.body.scrollLeft
                  tempY = event.clientY + document.body.scrollTop
                  } 
                  else 
                  {  
                   tempX = e.pageX
                   tempY = e.pageY
                  }  
  
                  document.Show.MouseX.value = tempX
                  document.Show.MouseY.value = tempY
  
                  return true
                  }
          &lt;/script&gt;     
  </code></pre>