javascript get x and y coordinates on mouse click
I have a little div tag that when I click it (onClick event), it will run the printMousePos() function.
This is the HTML tags:
<html>
<header>
<!-- By the way, this is not the actual html file, just a generic example. -->
<script src='game.js'></script>
</header>
<body>
<div id="example">
<p id="test">x: , y:</p>
</div>
</body>
</html>
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!
Answer
Like this.
function printMousePos(event) {
document.body.textContent =
"clientX: " + event.clientX +
" - clientY: " + event.clientY;
}
document.addEventListener("click", printMousePos);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.