Javascript can't execute this simple code

Question

I'm trying to toggle a navbar when you click on a button. I've followed an example but my javascript gives an error: caught TypeError: Cannot read property 'display' of undefined at HTMLDivElement.myFunction (script.js:6) myFunction @ script.js:6

The Code:

var myNavigation = document.getElementsByTagName("nav");

var myFunction = function (){
       if (myNavigation.style.display === "none") {
              myNavigation.style.display === "flex"
       } else {
              myNavigation.style.display === "none"
       }
};

myButton.onclick = myFunction;

see there you are calling `myfunction` in bad way you should it like this `myFunction()` with the brackets — Umutambyi Gad, Jul 04 '20 at 19:28
the `getElementsByTagName` should return an array. You can access the elements of that array like this: `myNavigation[0].style.display = "flex";` where `[0]` accesses the first element in that array. Also note there is only one `=` not 3. — user3647971, Jul 04 '20 at 19:28
@Gad No, he's not trying to call `myFunction` there, no `()` supposed to be there. — Bergi, Jul 04 '20 at 19:29
and if also while you were selecting button you used selector that return in array you should index on it — Umutambyi Gad, Jul 04 '20 at 19:30

score 3 · Answer 1 · answered Jul 04 '20 at 19:27

3

You are using document.getElementsByTagName(). This returns an array. You have to target a specific element inside that array.

answered Jul 04 '20 at 19:27

genius42

243
1
6

ray · Answer 2 · 2020-07-04T20:06:00.360

1

getElementsByTagName returns a list, not an element.

edited Jul 04 '20 at 20:06

answered Jul 04 '20 at 19:29

ray

26,557
5
28
27

1

It does return a *live* HTMLCollection though, so it doesn't matter what it will find at load time – Bergi Jul 04 '20 at 19:32

Javascript can't execute this simple code

2 Answers2