javascript – Sometimes the color of the navbar doesn’t change in Chrome

0
125
html - Animation after toggling doesn't apply the second style


I am developing my web developer portfolio. In that when I press the hamburger, the color of the top nav bar should also change. But sometimes in Chrome it doesn’t change and I have to reload. I thought it is probably because the script didn’t load. But even after waiting for a long time this bug occurs. Can anyone say why it happens and how to solve it. Note that this color change is only for mobile nav. The source code is available at https://github.com/mrjithin/my-portfolio/ . And the script that does this thing is available with the name ham.js in the scripts folder.
The bug image
The top color should have been the same as the color of the rest of the navbar.

// ham.js
// For mobile hamburger
const mobNav = document.querySelector("nav#mobile");
const deskNav = document.querySelector("nav.desktop");
const navColor = window.getComputedStyle(mobNav).getPropertyValue("background-color");

document.getElementsByClassName("ham")[0].addEventListener("click", (event) => {
  document.getElementsByClassName("ham")[0].classList.toggle("cross");
  document.getElementById("line2").classList.toggle("none");
  mobNav.classList.toggle("on");
  mobNav.classList.toggle("off");
  if(mobNav.className === "on"){
    deskNav.style.backgroundColor = navColor;
  } else {
    deskNav.style.backgroundColor = "";
  }
  event.stopPropagation();
});

// To close the navbar on clicking a link. 
const mobileLis = document.querySelectorAll("nav#mobile a");

Array.from(mobileLis).forEach(link => {
  link.addEventListener("click", event => {
    document.getElementsByClassName("ham")[0].classList.toggle("cross");
  document.getElementById("line2").classList.toggle("none");
    mobNav.classList.toggle("on");
    mobNav.classList.toggle("off");
    if(mobNav.className === "on"){
      deskNav.style.backgroundColor = navColor;
    } else {
      deskNav.style.backgroundColor = "";
    }
    event.stopPropagation();
  })
})

Thanks in advance!



Source link

Leave a reply

Please enter your comment!
Please enter your name here