button onclick requires two clicks

Question

I have a button in my HTML file:

<button class="nav__btn resbtn" onclick="resumeNavToggle()">Resume</button>

which calls a function from a separate javascript file:

function resumeNavToggle() {
  let resBtn = document.querySelector(".resbtn");
  let resNav = document.querySelector(".resume__subnav");
  let resNavSub1 = document.querySelector(".resume__subnav1");
  let resNavSub2 = document.querySelector(".resume__subnav2");
  let licNav = document.querySelector(".liccer__subnav");
  let couNav = document.querySelector(".courses__subnav");
  let licBtn = document.querySelector(".licbtn");
  let couBtn = document.querySelector(".coubtn");
  if (resNav.style.display === "none") {
    resBtn.style.backgroundColor = "#01050a";
    resNav.style.display = "grid";
    // A BUNCH OF STYLE CHANGES CUT TO MAKE THINGS EASIER
    licBtn.style.backgroundColor = "#010a13";
    couBtn.style.backgroundColor = "#010a13";
  } else {
    resNav.style.display = "none";
  }
}

But the button is not calling the function on the first click, only on the second click onwards. Any ideas as to what could be causing this?

I am guessing the first time the button in clicked, display is not yet 'none' so the else condition fires the first time and sets display to none, on the second click, the if condition fires because the display is now set to none. — 2pha, Aug 28 '21 at 23:35
Duplicate of [Why my show hide button needs double-click on first time](/q/55071684/4642212). Also see [How to retrieve the display property of a DOM element?](/q/3778335/4642212). Instead, use CSS classes, e.g. on a common ascendant element: `.hidden .resbtn { background-color: #01050a; }` etc.; then [`.classList.contains("hidden")`](//developer.mozilla.org/docs/Web/API/Element/classList) to check for its existence, and `.classList.toggle("hidden")`. Consider using the [`hidden` attribute](//developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) instead. — Sebastian Simon, Aug 28 '21 at 23:36
display is set to "none" in a separate CSS file before the function is called. Would this mean I need to set display to "none" inline in the HTML file instead of the CSS file? @2pha — livingtheOKlife, Aug 28 '21 at 23:39
YES! @SebastianSimon, spot on! I have it working now thank you! — livingtheOKlife, Aug 28 '21 at 23:43
All you need to do is define both variants in your CSS, for example: `.resume__subnav { display: grid; } .resume__subnav.hidden { display: none; }`, then toggle the `hidden` class. Don’t change individual style properties in JS. Is `resNav.style.display = "none";` the only line in your `else` case? Do you really need to set the background colors of all these elements every time? — Sebastian Simon, Aug 28 '21 at 23:46
@livingtheOKlife _“adding `|| x.style.display === ""` to the conditional statement”_ — Are you referring to the accepted answer in that other question? That answer is actually bad because it barely explains what went wrong and uses a suboptimal solution. It’s much more important to understand what’s going on here and how to apply the solution, if at all. Use CSS classes, not inline styles. — Sebastian Simon, Aug 28 '21 at 23:49
@SebastianSimon initially, just adding || x.style.display === "" to the conditional statement works. As a fix, it may not be the best. However for 1 o'clock in the morning, it will do just fine :P I shall come back tomorrow and rewrite so that I can toggle the hidden class which, quite frankly, is a much better idea! :P I shall post on here tomorrow as to how it went! — livingtheOKlife, Aug 28 '21 at 23:54

button onclick requires two clicks

0 Answers0