[FIXED] Why JS addEventListener is not working in this code?

Issue

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 class="nav-items nav-item1"></div>
  <div class="nav-items nav-item2"></div>
  <div class="nav-items nav-item3"></div>
  <div class="nav-items nav-item4"></div>
  <div class="nav-items nav-item5"></div>
</div>

Image – Image of the navbar

Solution

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 class="item">Test</div>
<div class="item" 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 class="item">Test</div>
<div class="item" style="color: red;">With inline style</div>

Answered By – connexo

Answer Checked By – Senaida (FixeMe Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *