Задать вопрос
yxtiblin
@yxtiblin
javascript

Почему не работает classList.add?

Мне нужно чтобы при наведении на определенную область то классу этой области добился бы еще один класс но classList даже не высвечивается в консоли при наборе. Как исправить эту проблему? напишите пожалуйста все возможные способы исправить или сделать иначе
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Test JS</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="other">
      asdwas
   </div>
   <article class="other">
      <div class="ch">
         <p>
            Test
         </p>
      </div>   
      <div class="ch">
         asdasd
      </div>
   </article>
   <script src="script.js"></script>
</body>
</html>

const element = document.querySelectorAll('.ch')

const show = (Event) => {
   console.log('Навел!');
   element.classList.add('bgc')
}

element.forEach(element =>{
   element.addEventListener('mouseover', show)
})
  • Вопрос задан
  • 1105 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Если называть переменные по логике, то все станет ясно.

const elements = document.querySelectorAll('.ch')

const show = (Event) => {
   console.log('Навел!');
   // ошибка. elements - коллекция, а element вообще здесь не определен
   elements.classList.add('bgc');
}

elements.forEach(element =>{
   element.addEventListener('mouseover', show)
})


Чувствуете разницу?

Можно написать так:

const elements = document.querySelectorAll('.ch')

elements.forEach(element => {
  element.addEventListener('mouseover', event => {
    console.log('Навел!');
    element.classList.add('bgc')
  })
})


Или так

const elements = document.querySelectorAll('.ch')

const show = (event, element) => {
  element.classList.add('bgc')
}

elements.forEach(element => {
  element.addEventListener('mouseover', event => {
    show(event, element)
  })
})


Или так

const elements = document.querySelectorAll('.ch')

const show = event => {
   event.currentTarget.classList.add('bgc')
}

elements.forEach(element =>{
   element.addEventListener('mouseover', show)
})
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы