How can i get a class name added by javascript

December 13, 2021

In the code below i’m adding an active class active when the user click on the li.

when i do document.querySelector(".active"); to select the li that contain the active class the result is always the first li that contain the active class by default.

How can i get the active class when it’s added onclick by the javascript?

let lis = document.querySelectorAll("li");
let lisArray = Array.from(lis);

lisArray.forEach((li) => {
  li.addEventListener("click", function (e) {
    lisArray.forEach((ele) => {
      ele.classList.remove("active");
    });
    li.classList.add("active");
    document.querySelector("body").style.backgroundColor =
      e.currentTarget.dataset.cont;
    window.localStorage.setItem("color", e.currentTarget.dataset.cont);
  });
});

if(window.localStorage.getItem("color")){
  document.body.style.backgroundColor = localStorage.getItem("color");
}else{
  document.body.style.backgroundColor = "white";
}

let active = document.querySelector(".active");
console.log(active);

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
  font-family: Arial;
}

ul {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #ddd;
}

ul li {
  border: 1px solid #f0f0f0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

ul li:first-of-type {
  background-color: white;
  opacity: 0.3;
}

ul li:first-of-type.active body {
  background-color: red;
}

ul li:nth-of-type(2) {
  background-color: red;
  opacity: 0.3;
}

ul li:nth-of-type(3) {
  background-color: green;
  opacity: 0.3;
}

ul li:nth-of-type(4) {
  background-color: deepskyblue;
  opacity: 0.3;
}

ul li.active,
ul li:hover {
  opacity: 1;
}

<ul>
  <li class="active" data-cont="white"></li>
  <li data-cont="red"></li>
  <li data-cont="green"></li>
  <li data-cont="deepskyblue"></li>
</ul>

>Solution :

Set the active element in the click function:

let lis = document.querySelectorAll("li");
let lisArray = Array.from(lis);
let active;

lisArray.forEach((li) => {
  li.addEventListener("click", function (e) {
    lisArray.forEach((ele) => {
      ele.classList.remove("active");
    });
    li.classList.add("active");
    active = li;
    console.log(li);
    document.querySelector("body").style.backgroundColor =
      e.currentTarget.dataset.cont;
    window.localStorage.setItem("color", e.currentTarget.dataset.cont);
  });
});

if (window.localStorage.getItem("color")) {
  document.body.style.backgroundColor = localStorage.getItem("color");
} else {
  document.body.style.backgroundColor = "white";
}

active = document.querySelector(".active");
console.log(active);