nawigacja vanilla js

Question

Dopiero zaczynam z js. Chciałam żeby wyświetlały się pozycje menu po kliknięciu w ikonkę menu. Wydawało mi się proste, ale coś jednak nie gra. Próbowałam zrobić na dwa sposoby, obydwa tu zamieszczam.

Konsola wypluwa mi coś takiego: "menuIcon.addEventListener is not a function".

Pewnie to moje luki w wiedzy, będę wdzięczna za wskazówki.

Próba 1

Próba2

 

 

 

Answer 1

zmień kod JS na ten 

var menuIcon = document.getElementsByClassName('menu-icon');
var nav = document.getElementsByClassName('nav')[0];
[...menuIcon].forEach(menu => {
  menu.addEventListener('click', function(){
    if (nav.style.display == 'none'){
      nav.style.display = 'block';
    }
    else {
      nav.style.display = 'none';}
  });
})

 

A dlatego wywalało addEventListener is not a function, ponieważ getElementsByClassName zwraca coś a'la HTMLCollection. 

Comments

Dziękuję bardzo! W międzyczasie znalazłam jeszcze takie rozwiązanie, gdzie tylko zamieniam wybór klasy na wybór selektora i wszystko gra. Nie wiedziałam, że "getElementsByClassName" powoduje coś takiego. Jeszcze raz dzięki :)

var menuIcon = document.querySelector('.menu-icon');
var nav = document.querySelector('.nav');

menuIcon.addEventListener('click', function(){
  nav.classList.toggle('nav-active');
  });

 

---

możesz tak zrobić, ponieważ querySelector zwraca jeden element ( jak getElementById ).