div needs to be clicked twice to trigger event listener js-CodePudding

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 >
    <img  src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon">
  </div>

CodePudding user response：

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 >
  <img  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>

CodePudding user response：

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";
  }
});