Блог

Главная - Вопросы по программированию - как я могу добавить событие к объекту nodelist

как я могу добавить событие к объекту nodelist

#javascript #html #events #onclick

#javascript #HTML #Мероприятия #onclick

Вопрос:

хорошо, итак, я пытаюсь использовать addEventListener метод для выполнения щелчка event , который переключит класс для анимации моей строки меню и появления бокового меню. Это мой код 

 //reference to the ".menu" class
const menu = document.querySelector('.menu');
console.log(menu)

const menuButton = document.querySelector('.menu-button')
// Using your menuButton reference, add a click handler that calls toggleMenu
console.log(menuButton);
menuButton.addEventListener("click", function() {
  menuButton.classList.toggle('.menu--open');
  console.log('toggled');
});  
 <div class="header">
  <img class="menu-button" src="./assets/menu.png" />
  <h1>Lambda School Newsfeed</h1>
</div>
<div class="menu">
  <ul>
    <li>Students</li>
    <li>Faculty</li>
    <li>What's New</li>
    <li>Tech Trends</li>
    <li>Music</li>
    <li>Log Out</li>
  </ul>
</div>

Я понимаю, что в ответ я получаю nodelist и не позволяет мне использовать метод event, но, похоже, я не могу решить проблему

Комментарии:

1. У вас здесь нет никаких списков узлов, только отдельные элементы ..? Если вам нужен event объект, объявите его как параметр функции прослушивателя? Смотрите фрагмент, ваш код, похоже, работает

Ответ №1:

Удалить . из .menu--open этого фрагмента menuButton.classList.toggle('.menu--open'); 

 //reference to the ".menu" class
const menu = document.querySelector('.menu');
console.log(menu)

const menuButton = document.querySelector('.menu-button')
// Using your menuButton reference, add a click handler that calls toggleMenu
console.log(menuButton);
menuButton.addEventListener("click", function() {
  menuButton.classList.toggle('menu--open');
});  
 .menu--open {
  border: 1px solid red;
}

.header {
  cursor: pointer;
}  
 <div class="header">
  <img class="menu-button" src="./assets/menu.png" />
  <h1>Lambda School Newsfeed</h1>
</div>
<div class="menu">
  <ul>
    <li>Students</li>
    <li>Faculty</li>
    <li>What's New</li>
    <li>Tech Trends</li>
    <li>Music</li>
    <li>Log Out</li>
  </ul>
</div>

Ответ №2:

В вашем коде есть две проблемы:

  1. Вам нужно использовать menu--open вместо .menu--open внутри функции переключения списка классов
  2. Вам нужно использовать menu.classList.toggle вместо menuButton.classList.toggle 

 //reference to the ".menu" class
const menu = document.querySelector('.menu');
console.log(menu)

const menuButton = document.querySelector('.menu-button')
// Using your menuButton reference, add a click handler that calls toggleMenu
console.log(menuButton);
menuButton.addEventListener("click", function() {
  menu.classList.toggle('menu-open');
});  
 .menu.menu-open {
  display: none;
}  
 <div class="header">
  <img class="menu-button" src="./assets/menu.png" />
  <h1>Lambda School Newsfeed</h1>
</div>
<div class="menu">
  <ul>
    <li>Students</li>
    <li>Faculty</li>
    <li>What's New</li>
    <li>Tech Trends</li>
    <li>Music</li>
    <li>Log Out</li>
  </ul>
</div>