Trying to get a custom div to follow the cursor. Gives me error "cursorDot.style is undefined"

Here's the code I used in my javascript file:

const cursorDot = document.querySelectorAll(".cursor-dot");

window.addEventListener("mousemove", function (e) {

    const posX = e.clientX;
    const posY = e.clientY;

    console.log(posX); 
    
    cursorDot.style.left = `${posX}px`;
    cursorDot.style.top = `${posY}px`;

});

const cursorDot = document.querySelectorAll(".cursor-dot");

window.addEventListener("mousemove", function (e) {

    const posX = e.clientX;
    const posY = e.clientY;

    console.log(posX); 
    
    cursorDot.style.left = `${posX}px`;
    cursorDot.style.top = `${posY}px`;

});

and the HTML and CSS:

<div class="cursor-dot"></div>

<div class="cursor-dot"></div>

.cursor-dot {
    height: 15px;
    width: 15px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.cursor-dot {
    height: 15px;
    width: 15px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

error in console: "cursorDot.style is undefined"

2 Replies

Choo♚𝕂𝕚𝕟𝕘•20h ago

The result of querySelectorAll() is not an element. It is a node list. If there is only one member of the cursor-dot class. Use querySelector(). This approach also works if there are multiple members of the class but you only want to select the first one. If there are multiple members of the class and you want to operate on all of them, you must iterate through the node list and apply the operation on each individually.

KivoryOP•18h ago

It worked. thank you.

Gaming

Programming

Trying to get a custom div to follow the cursor. Gives me error "cursorDot.style is undefined"