Задать вопрос
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)
})
  • Вопрос задан
  • 1090 просмотров
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 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нужен верстальщик. Переверстать, доверстать, доработать интерфейс
22 нояб. 2024, в 16:13
7000 руб./за проект
Доработка и исправление ошибок в работе Личного кабинета сайта
22 нояб. 2024, в 15:59
35000 руб./за проект
Рефакторинг vue.js/nest.js интерфейса у админки
22 нояб. 2024, в 15:50
150000 руб./за проект
Ещё заказы