yxtiblya
@yxtiblya

Почему не работает 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)
})
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
delphinpro
@delphinpro
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)
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы