Задать вопрос
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)
})
  • Вопрос задан
  • 986 просмотров
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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Конвертировать ключи в аккаунты whatsapp
09 мая 2024, в 00:49
1000 руб./за проект
Доработать игрового телеграмм бота python, telethon
08 мая 2024, в 23:13
4000 руб./за проект
Верстка лендинга из фигмы
08 мая 2024, в 22:04
500 руб./за проект
Ещё заказы