Why JS addEventListener is not working in this code?-CodePudding

I've this code and it's not working. I know it would be some obvious typo or logical error but I am not able to find it. When I click at any nav-item, it doesn't change the background of body. I'm new to JS. Please help me with this -

let body = document.querySelector("body");
let navBack = document.getElementById("navbar");
let introNav = document.querySelector(".nav-item1");
let expNav = document.querySelector(".nav-item2");
let projectsNav = document.querySelector(".nav-item3");
let skillsNav = document.querySelector(".nav-item4");
let contactNav = document.querySelector(".nav-item5");

introNav.addEventListener("click", function() {
  body.style.background = introNav.style.background;
  navBack.style.background = introNav.style.background
})

expNav.addEventListener("click", function() {
  body.style.background = expNav.style.background;
  navBack.style.background = expNav.style.background
})

projectsNav.addEventListener("click", function() {
  body.style.background = projectsNav.style.background;
  navBack.style.background = projectsNav.style.background
})

skillsNav.addEventListener("click", function() {
  body.style.background = skillsNav.style.background;
  navBack.style.background = skillsNav.style.background
})

contactNav.addEventListener("click", function() {
  body.style.background = contactNav.style.background;
  navBack.style.background = contactNav.style.background
})

#navbar {
    background: var(--introduction-color);
    z-index: 1;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    position: absolute;
    clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
    transform: rotate(-45deg);
    top: -400px;
    left: -400px;
}
.nav-items {
    width: 800px;
    height: 800px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    cursor: pointer;
    clip-path: polygon(50% 50%, 100% 50%, 100% 66%);
}
.nav-item1 {
    background: var(--introduction-color);
    transform: rotate(45deg);
}
.nav-item2 {
    transform: rotate(63deg);
    background: var(--experience-color);
}
.nav-item3 {
    transform: rotate(81deg);
    background: var(--projects-color);
}
.nav-item4 {
    transform: rotate(99deg);
    background: var(--skills-color);
}
.nav-item5 {
    transform: rotate(117deg);
    background: var(--contacts-color);
}

<div id="navbar">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Image - Image of the navbar

CodePudding user response：

element.style can only access inline styles (those assigned via a style="..." attribute):

document
  .querySelectorAll('.item')
  .forEach(
    item => console.log(item, 'style.color:', item.style.color)
  );

<div >Test</div>
<div  style="color: red;">With inline style</div>

To access the currently applied value of color, you'll have to resort to window.getComputedStyle(element):

document
  .querySelectorAll('.item')
  .forEach(
    item => console.log(item, getComputedStyle(item).color)
  );

<div >Test</div>
<div  style="color: red;">With inline style</div>

CodePudding user response：

put the script at the bottom of the page or use const introNav = document.getElementsByClassName("nav-item1");