JavaScript Is it me or the computer?

[KittenKatja]

I got

addEventListener(
    "mousemove",
    () => {
        let x = event.screenX / 100 * window.innerWidth;
        let y = event.screenY / 100 * window.innerHeight;
        let a = document.documentElement.style;
        a.setProperty("--mouseX", x + "%");
        a.setProperty("--mouseY", y + "%");
    }
)

but the values are anything but inside the 0 to 100% range.
I have also switched around the equation a lot.

 

[JosiahMaybe]

There should be (event) => not just () to have events in that listener. X E.

 

[KittenKatja]

But it's an arrow function, and I'm not inserting anything from outside the function to be used inside the function.
It's like declaring a const without a value.

Also, it works anyway, as the problem is the equation, not the arrow function.

 

[JosiahMaybe]

Is it actually changing anything? There is a defined in Javascript pages default "event" that you may be using in that function instead. If you want 0 to 100% then divide by inner height and width and multiply by 100. Like this:

addEventListener(
    "mousemove",
    function (event) {
        //0 to 100 x and y
        let x = event.screenX / window.innerWidth * 100;
        let y = event.screenY / window.innerHeight * 100;
        let a = document.documentElement.style;
        a.setProperty("--mouseX", x + "%");
        a.setProperty("--mouseY", y + "%");
        //X E
    }
    //X E
)
//X E

You may also use console.log(x+", "+y) or something like it to see what x and y are. Anyway, this seems like correct equation for 0 to 100% to me. X E.

 

[KittenKatja]

The Lowest Y value is 9.12906610703043%, and the highest is 109.02413431269676%. (0% and 99.9074074074074% in full-screen)
But the X value stays within 0% to 99.94791666666667%. (Even with DevTools open)
How can I limit it to only the website?

I'm also using clamp(x).toFixed(4) + "%" in the last step.

function clamp(num, min, max) {return Math.min(Math.max(num, min), max);}

It results in NaN%, and putting Number() in doesn't solve it.

 

[Antero360]

I got

addEventListener(
    "mousemove",
    () => {
        let x = event.screenX / 100 * window.innerWidth;
        let y = event.screenY / 100 * window.innerHeight;
        let a = document.documentElement.style;
        a.setProperty("--mouseX", x + "%");
        a.setProperty("--mouseY", y + "%");
    }
)

but the values are anything but inside the 0 to 100% range.
I have also switched around the equation a lot.

My question, to @JosiahMaybe's point... where are you getting the variable "event" from? I don't see it defined anywhere in your code snippet... plus, whenever you are doing an event listener, you should be passing the "event", or "e" as you will see in some cases because laziness, variable into your callback function.

 

[JosiahMaybe]

The Lowest Y value is 9.12906610703043%, and the highest is 109.02413431269676%. (0% and 99.9074074074074% in full-screen)
But the X value stays within 0% to 99.94791666666667%. (Even with DevTools open)
How can I limit it to only the website?

I'm also using clamp(x).toFixed(4) + "%" in the last step.

function clamp(num, min, max) {return Math.min(Math.max(num, min), max);}

It results in NaN%, and putting Number() in doesn't solve it.

It seems like you need to input min and max to clamp. You could also try using document.body.addEventListener and event.client(X or Y) or event.page(X or Y). Result of clamp with undefined arguments should be NaN seemingly. X E.

 

[KittenKatja]

I forgot about min and max.
But how can I limit the raw value to the viewport without affecting full-screen mode?

 

[JosiahMaybe]

Try event.page(X or Y) or event.client(X or Y). Note it is one letter from in parentheses. X E.

 

[KittenKatja]

event.clientX works.
Thanks!