Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Changing the pointer cursor at each page reload

I’m writing some code trying to change a cursor at each reload, using javascript only.
I’m using Math.random cause I have 13 different cursors (it’s ghibli theme)

It works fine for the default as I’m changing it on the html element

BUT I want all the pointers to change as well.
To clarify, on each reload I have a set of two cursor I need to put in : one for the default cursor and one for the hover/pointer cursor

And I can’t seem to do it.
It looks like the cursor overall doesn’t have different states (like if it was a kindof object) but elements have class (like the <a> element) that change the cursor image to, well a pointer.

I can’t overwrite the <a> base state.

Here is the code I have rn (I’m a student so it might not be pretty) :

let cursor = Math.floor(Math.random() * 13);
console.log(cursor);

const urlDefault = `url('cursors/Click${cursor}.svg')`;
const urlGrab = `url('cursors/Grab${cursor}.svg')`;


document.querySelector("html").style.cursor = urlDefault + ", default";




let liens = document.querySelectorAll("a");
let i = 0

while (i<liens.length) {
    liens[i].addEventListener('mouseover', () => { document.querySelector("html").style.cursor = urlGrab + ", pointer"; })  
    liens[i].addEventListener('mouseleave', () => { document.querySelector("html").style.cursor = urlDefault + ", default"; }) 
    i++;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    SOOOO it seems I'm rather dumb and just replacing

    while (i<liens.length) {
    liens[i].addEventListener('mouseover', () => { document.querySelector("html").style.cursor = urlGrab + ", pointer"; })  
    liens[i].addEventListener('mouseleave', () => { document.querySelector("html").style.cursor = urlDefault + ", default"; }) 
    i++;
}

    By

    while (i < liens.length) {
    liens[i].style.cursor = urlGrab + ", pointer";
    i++;
}

    AND ITS LOGIC since we are here focusing on <a> elements being hovered.

    Thank you all for your time and hopes this will help future people having the same prob (even tho its simple)


  2. 0

    you need to update the cursor variable inside the event listeners. Here’s how you can do it:

    let liens = document.querySelectorAll("a");
for (let i = 0; i < liens.length; i++) {
    liens[i].addEventListener('mouseover', () => {
        let cursor = Math.floor(Math.random() * 13);
        const urlGrab = `url('cursors/Grab${cursor}.svg')`;
        document.querySelector("html").style.cursor = urlGrab + ", pointer";
    });
    liens[i].addEventListener('mouseleave', () => {
        let cursor = Math.floor(Math.random() * 13);
        const urlDefault = `url('cursors/Click${cursor}.svg')`;
        document.querySelector("html").style.cursor = urlDefault + ", default";
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search