javascript display none not working

Question

I'm trying to make a nav bar show when a button(icon) is clicked and disappear when it is clicked again. The first part works where it shows but then when clicked again, nothing happens. I can't figure out why the second part is being ignored. Thank you

let nav = document.querySelector("nav");
let icon = document.querySelector(".mobile-icon");
console.log(nav);
icon.addEventListener("click", showMenu)

function showMenu() {
if (nav.style.display = "none"){
nav.style.display = "block";
} else {
    nav.style.display = "none";
}

}

`=` is for assignment, `==` and `===` are for comparison. – Pointy Nov 30 '17 at 14:24 — Pointy, Nov 30 '17 at 14:24

score 1 · Accepted Answer · answered Nov 30 '17 at 14:24

1

You need to use the equality operator === when comparing the display string value. You're currently using an assignment operator:

function showMenu() {
  if (nav.style.display === "none"){
    nav.style.display = "block";
  } else {
    nav.style.display = "none";
  }
}

answered Nov 30 '17 at 14:24

Carl Edwards

13,826
11
57
119

Wow that was a silly mistake. Thanks a lot. I'll mark as correct when allowed. – JMay Nov 30 '17 at 14:28
Great to hear. Thanks. – Carl Edwards Nov 30 '17 at 14:29

javascript display none not working

1 Answers1