javascript get x and y coordinates on mouse click

Question

I have a little div tag that when I click it  onClick event   it will run the printMousePos   function   This is the HTML tags    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  example  gt               lt p id  test  gt x    y  lt  p gt           lt  div gt       lt  body gt   lt  html gt    This is the printMousePos function in a seperate  js file   function printMousePos         var cursorX      var cursorY      document onmousemove   function e       cursorX   e pageX      cursorY   e pageY        document getElementById  test   innerHTML    x      cursorX      y      cursorY      Yes  the function actually works  it knows when you click it and all   but it returns undefined for both x and y  so I m assuming that the get x and y code in the function is incorrect  Any Ideas  I also know there isn t any built in functions within javascript itself to return the x and y 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

User · Answer

It sounds like your printMousePos function should    Get the X and Y coordinates of the mouse Add those values to the HTML   Currently  it does this    Creates  undefined  variables for the X and Y coordinates of the mouse Attaches a function to the  mousemove  event  which will set those variables to the mouse coordinates when triggered by a mouse move  Adds the current values of your variables to the HTML   See the problem  Your variables are never getting set  because as soon as you add your function to the  mousemove  event you print them   It seems like you probably don t need that mousemove event at all  I would try something like this   function printMousePos e        var cursorX   e pageX      var cursorY   e pageY      document getElementById  test   innerHTML    x      cursorX      y      cursorY

User · Answer

simple solution is this   game js   document addEventListener  click   printMousePos  true   function printMousePos e          cursorX   e pageX        cursorY  e pageY             test    text   pageX      cursorX    pageY      cursorY

User · Answer

Like this    x000D   x000D  function printMousePos event    x000D    document body textContent   x000D       clientX      event clientX   x000D        - clientY      event clientY  x000D    x000D   x000D  document addEventListener  click   printMousePos   x000D   x000D   x000D    MouseEvent - MDN     MouseEvent clientX Read only   The X coordinate of the mouse pointer in local  DOM content  coordinates       MouseEvent clientY Read only   The Y coordinate of the mouse pointer in local  DOM content  coordinates

[javascript] javascript get x and y coordinates on mouse click

Examples related to javascript

Examples related to html

Examples related to onclick

Examples related to onmouseclick