Continuously Update event.x on the window

1

Hello,

Thinking this would be an extremely quick exercise after learning the basics of html canvas, I wanted to make colors follow my cursor around the screen. My first step was to get the value of x on the mousemove’s event. I did, but I am having trouble getting it to continuously update with my mouse’s movement. It just shows once and setInterval isn’t making it re-up. It can’t read the property on x even though the code is working (albeit minimally) thanks to that property? Also, I’m not sure of how to clear the x value continuously. I thought setting document to = “” would’ve done it, but I can’t get it to budge.

Any advice is greatly appreciated, in advance!

https://codepen.io/trwexler/pen/BaNJmQJ

2

Using document.write() after page is loaded will clear the page (including your script). Just make random div and append value to it or simply console.log() to check if your function is working:

window.addEventListener('mousemove', function(event) {

  var mouseX = event.clientX; // NOT event.x
  var mouseY = event.clientY; // NOT event.y
  console.log(mouseX, mouseY);

});

Links:


Demo:
https://codepen.io/snigo/full/zYGpPaG

3

Thank you for your response!

I am, however, still having difficulties. All I want this to do is show me the ClientX value (where the x is) on the document or window at all times, without showing me every value at once. Just the one current value of its position. I tried to make your changes and am still having the same problems I was having at the start.

In the console it iterates and gives me every single value on top of each other. When I switch that to the document.write, it only shows the value of when the event first occurred and nothing else.

https://codepen.io/trwexler/pen/BaNJmQJ?editors=1010

Also (and just for my knowledge) event.x works the same as event.clientX. Is the latter just better/more common practice or is there a functional difference I’m not noticing?

4 
var xValue = document.getElementById('xValue');

xValue.addEventListener(‘mousemove’, function(event) {

var mouseX = event.clientX; // NOT event.x
var mouseY = event.clientY; // NOT event.y
xValue.innerHTML = mouseX + ' , ' + mouseY;

});

I just want what this brings except I want it to update as the mouse moves.