div needs to be clicked twice to trigger event listener js

Question

When I click on the .current-pet-icon div, I need to click it twice before it shows my menu. but every subsequent click after is okay. Just when I refresh / load the page the first time I need to double click. Any help wpuld be greatly appreciated!

Javascript

const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');

menuToggle.addEventListener('click', () => {
  if (openedNav.style.display === "none") {
    openedNav.style.display = "block";
    shadowNav.style.display = "block";
  } else {
    openedNav.style.display = "none";
    shadowNav.style.display = "none";
  }
});

shadowNav.addEventListener('click', () => {
  if (openedNav.style.display = "block") {
    openedNav.style.display = "none";
    shadowNav.style.display = "none";
  }
});

HTML

 <div class="pet-icon-container">
    <img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon">
  </div>

`openedNav.style.display = "block"` -> `openedNav.style.display === "block"` — Konrad, Aug 15 '22 at 07:15

Danny · Answer 1 · 2022-08-15T07:38:55.200

A quick console.log(openedNav.style.display) will help you find the issue. In the first call to the click handler, openNav.style.disply is actually empty (not 'none').

Why does this happen

If you access a DOM Element via getElementById, you'll not be able to read the computed style of that element, because it is defined inside the CSS file (I assume you are doing that).

How to fix it

use getComputedStyle. Or see the top answers to these questions if you wanna know more:

menuToggle.addEventListener("click", () => {
  if (getComputedStyle(openedNav).display=== "none") {
    openedNav.style.display = "block";
    shadowNav.style.display = "block";
  } else {
    openedNav.style.display = "none";
    shadowNav.style.display = "none";
  }
});

score 0 · Answer 2 · answered Aug 15 '22 at 07:35

Assuming that there is a CSS style assigned to hide both .nav-popout and .shadow-nav elements initially then a modified version of the original js code appears to function as expected.

const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');

menuToggle.addEventListener('click', (e)=>{
  openedNav.style.display = openedNav.style.display == 'block' ? 'none' : 'block';
  shadowNav.style.display = shadowNav.style.display == 'block' ? 'none' : 'block';
});



shadowNav.addEventListener('click', (e)=>{
  if( openedNav.style.display == "block" ) {
    shadowNav.style.display = openedNav.style.display = "none";
  }
});

.pet-icon-container img{
   width:150px;
}

.nav-popout,
.shadow-nav{
  display:none;
}

<div class="pet-icon-container">
  <img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon" />
</div>

<div class='nav-popout'>#NAV-POPOUT#</div>
<div class='shadow-nav'>#SHADOW-NAV#</div>

div needs to be clicked twice to trigger event listener js

2 Answers2

Why does this happen

How to fix it