Javascript mouse coordinates and declaring DOCTYPE

Question

Javascript mouse coordinates and declaring DOCTYPE

108 Views Asked by Arash Naderi At 26 April 2025 at 16:07

I want to show mouse coordinates in a page and when I don't declare DOCTYPE it works but when I declare DOCTYPE it doesn't! Could you please help me with that? here is my code:

<html>
<head>
    <title>problem</title>
</head>
<body>
    text...
<div id="show"></div>
<script>
    document.body.onmousemove = function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
    }
</script>
</body>
</html>

In the code above I can get y coordinates with no problem but when I add a doctype it doesn't show y coordinates correctly:

<DOCTYPE html>
<html>
<head>
    <title>problem</title>
</head>
<body>
    text...
<div id="show"></div>
<script>
    document.body.onmousemove = function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
    }
</script>
</body>
</html>

EDIT

here is my code and it works perfectly now. Thank you all:

<!DOCTYPE html>
<html>
  <head>
    <title>problem</title>
  </head>
  <body>
    text...
    <div id="show"></div>
    <script>
    if (document.addEventListener) {
      document.addEventListener('mousemove', function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
      });
    } else {
      document.attachEvent("onmousemove", function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
      });

}
   </script>
  </body>
</html>

Original Q&A

There are 2 best solutions below

Kamran Ahmed On 24 August 2015 at 07:34

Firstly the correct the declaration of DOCTYPE by writing <!DOCTYPE html> instead of <DOCTYPE html>.

Secondly, change your script to:

document.addEventListener('mousemove', function(event) {
    document.body.innerHTML = "X: " + event.clientX + "<br />" + "Y: " + event.clientY;
});

For the parameters passed in a function can be referred directly, writing window.event would be when event would be a child of window object, in other words a global object.

**whois42** · Accepted Answer

Try do listen mouse event with event Listener, like this:

<!DOCTYPE html>
<html>
  <head>
    <title>problem</title>
  </head>
  <body>
    text...
    <div id="show"></div>
    <script>
    document.addEventListener('mousemove', function(event) {
        document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
    });
   </script>
  </body>
</html>

Javascript mouse coordinates and declaring DOCTYPE

There are 2 best solutions below

Related Questions in HTML

Related Questions in DOCTYPE

Related Questions in MOUSE-COORDINATES

Trending Questions

Popular # Hahtags

Popular Questions