Kevin Powell - Community•8mo ago

$ is not defined error

I've been trying to add a script that adds a class (.img_ _item--hover) to an element (.img__item) when the wrapper (.box) of said element is hovered. However, this error popped up in the browser, telling me that $ is undefined. I haven't been able to find a solution.

app.js

index.html

6 Replies

b1mind•8mo ago

because its jQuery (you would need to load a version of it as well) Or just convert it to JS 😉

Jochem•8mo ago

that conversion would be something like this (untested):

window.addEventListener('load'), () => {
  const box = document.querySelector('.box')
  box.addEventListener('mouseenter', () => {
    document.querySelector('.img__item').classList.add('img__item--hover');
  });
  box.addEventListener('mouseleave', () => {
    document.querySelector('.img__item').classList.remove('img__item--hover');
  });
});

window.addEventListener('load'), () => {
  const box = document.querySelector('.box')
  box.addEventListener('mouseenter', () => {
    document.querySelector('.img__item').classList.add('img__item--hover');
  });
  box.addEventListener('mouseleave', () => {
    document.querySelector('.img__item').classList.remove('img__item--hover');
  });
});

but honestly, that's an incredibly cursed way of styling an item on hover change the img__item--hover class to be img__item:hover and CSS will do that for you and you don't need any javascript

Jomu•8mo ago

Ohh, I was trying to change the styling of img__item when box is hovered. That's why I assumed I'd need to use JS Also thank you so much!! I appreciate the help from both of you

b1mind•8mo ago

nope no reason to use JS for a simple hover when we have :hover pseudo selector, agree with Jochem.

Jochem•8mo ago

oh, hm, then the selector is slightly different (if img__item is a child of box):

.box:hover .img__item

.box:hover .img__item

Jomu•8mo ago

there's always such a simple solution, that I realize after all the more complicated solutions 🙈 . Thank you for your help and time b1mind and Jochem!!

Gaming

Programming

$ is not defined error