.AddEventListner is not a fuction

Question

guys. Im trying to show/hide a mobile menu on click, but I don't know what I am doing wrong. If you may help me, I'd be really thankful:

   <script>
    var menuToggle = document.getElementsByClassName('menuToggle');
    var nav = document.getElementsByClassName('responsive-navigation');
    menuToggle.addEventListener('click', () => {
        if (nav === 'block') {
            nav.style.display = "none";
        } else {
            nav.style.display = "block";

        }
    });
</script>

.AddEventListner is not a fuction for **menuToggle**, because menuToggle is an **array collection** — Mister Jojo, Mar 18 '20 at 01:04

Mamun · Accepted Answer · 2020-03-18T01:17:11.547

1

getElementsByClassName() returns collection. You have to use specific index. I think you also mistakenly comparing the element itself to the property value in the if condition.

Though I prefer using querySelector():

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned

var menuToggle = document.querySelector('.menuToggle');
var nav = document.querySelector('.responsive-navigation');
menuToggle.addEventListener('click', () => {
  if (nav.style.display === 'block') {
    nav.style.display = "none";
  } else {
    nav.style.display = "block";
  }
});

edited Mar 18 '20 at 01:17

answered Mar 18 '20 at 01:05

Mamun

66,969
9
47
59

thank you, guys, now the problem I have, is that , it won;t hide the the container for the Menu, cna you help me with that, too, and thank you, a lot for your help – Jesús Bohorquez Mar 18 '20 at 01:13
1

`nav` will **never** equal the string `"block"` – Phil Mar 18 '20 at 01:15
1

@JesúsBohorquez, as Phil mentioned in his comment, you should check the value of the display property not the element itself. Please check the updated answer.... – Mamun Mar 18 '20 at 01:22
1

it did, thank you a lot – Jesús Bohorquez Mar 18 '20 at 22:52

.AddEventListner is not a fuction

1 Answers1