SolidJS•12mo ago

addEventListener not working?

Hey there, I'm kinda new working with SolidJS, I've worked with React before and have a lot of experience in plain HTML + CSS + JS without framework. But I was trying to create a hovering effect on my cards by adding a JavaScript function to rotate it in '3D'. The problem is that when I add an event listener, it never fires off even when meeting the condition to trigger it. Here's the code:

function map(val, minA, maxA, minB, maxB) {
    return minB + ((val - minA) * (maxB - minB)) / (maxA - minA);
}

function Card3D(card, ev) {
    console.log("card3D");
    let img = card.querySelector('img');
    let imgRect = card.getBoundingClientRect();
    let width = imgRect.width;
    let height = imgRect.height;
    let mouseX = ev.offsetX;
    let mouseY = ev.offsetY;
    let rotateY = map(mouseX, 0, 180, -25, 25);
    let rotateX = map(mouseY, 0, 250, 25, -25);
    let brightness = map(mouseY, 0, 250, 1.5, 0.5);

    img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    img.style.filter = `brightness(${brightness})`;
}

let cards = document.querySelectorAll('.staff-item');

cards.forEach((card) => {
    console.log(card);
    card.addEventListener('mousemove', (ev) => {
        Card3D(card, ev);
    });

    card.addEventListener('mouseleave', (ev) => {
        let img = card.querySelector('img');

        img.style.transform = 'rotateX(0deg) rotateY(0deg)';
        img.style.filter = 'brightness(1)';
    });
});

function map(val, minA, maxA, minB, maxB) {
    return minB + ((val - minA) * (maxB - minB)) / (maxA - minA);
}

function Card3D(card, ev) {
    console.log("card3D");
    let img = card.querySelector('img');
    let imgRect = card.getBoundingClientRect();
    let width = imgRect.width;
    let height = imgRect.height;
    let mouseX = ev.offsetX;
    let mouseY = ev.offsetY;
    let rotateY = map(mouseX, 0, 180, -25, 25);
    let rotateX = map(mouseY, 0, 250, 25, -25);
    let brightness = map(mouseY, 0, 250, 1.5, 0.5);

    img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    img.style.filter = `brightness(${brightness})`;
}

let cards = document.querySelectorAll('.staff-item');

cards.forEach((card) => {
    console.log(card);
    card.addEventListener('mousemove', (ev) => {
        Card3D(card, ev);
    });

    card.addEventListener('mouseleave', (ev) => {
        let img = card.querySelector('img');

        img.style.transform = 'rotateX(0deg) rotateY(0deg)';
        img.style.filter = 'brightness(1)';
    });
});

as you can see I tried checking to see if the cards were not registered by using the console but they all show up, the problem lies when I move my mouse over the item nothing seems to happen, I also tried adding a consol.log to the hover function to see if it at least went in there, but nothing happened. Does anybody know what I might be doing wrong? Or if anything is unclear, please ask!

4 Replies

aljordan82•12mo ago

Is your code wrapped in onMount?

OldViking013•12mo ago

Yeah, I tried with it wrapped in and without, but it doesn't seem to work after assigning. It works till the foreach, like it logs the cards but then the function doesn't log anything anymore for some reason

aljordan82•12mo ago

It works without any issues! maybe a missing class name? https://playground.solidjs.com/anonymous/dd521676-9d0d-49f8-925c-cb9fbe6e7b1a

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

OldViking013•12mo ago

Hmm that is really weird, might have to check that again. Thanks for the help so far!

Gaming

Programming

addEventListener not working?