How to Add a click Event Listener to nested class element

Question

I'm trying to add a click event listener to all the "question classes" nested deep inside the container class. I can't seem to figure out the issue here.

let colorChange = document.querySelectorAll(".container .dropdowns .dropdown-function .question")
  for(i = 0; i < colorChange.length; i++){
    colorChange.addEventListener("click", function(){
      colorChange[i].classList.add("change-color");
    });
}

.change-color{
  color: green
}

<div class = "container">
  <main class = "dropdowns">
    <h1 class = "title">FAQ</h1>
    <div class = "dropdown-function">
      <h2 class = "question"> Question 1 </h2>
      <p class = "dropdown-content"> Answer 1 </p>
    </div>
    <div class = "dropdown-function">
       <h2 class = "question"> Question 2 </h2>
       <p class = "dropdown-content"> Answer 2 </p>
    </div>
  </main>
</div>

Mamun · Accepted Answer · 2021-09-28 05:30:46Z

First, I will suggest you to notice if there is any error in console.

You are trying to attach the event (click) to the NodeList, not an individual element. Also declare the variable using let to create a block scope for the variable:

let colorChange = document.querySelectorAll(".container .dropdowns .dropdown-function .question")
  for(let i = 0; i < colorChange.length; i++){
    colorChange[i].addEventListener("click", function(){
      colorChange[i].classList.add("change-color");
    });
}

.change-color{
  color: green
}

<div class = "container">
  <main class = "dropdowns">
    <h1 class = "title">FAQ</h1>
    <div class = "dropdown-function">
      <h2 class = "question"> Question 1 </h2>
      <p class = "dropdown-content"> Answer 1 </p>
    </div>
    <div class = "dropdown-function">
       <h2 class = "question"> Question 2 </h2>
       <p class = "dropdown-content"> Answer 2 </p>
    </div>
  </main>
</div>

Collectives™ on Stack Overflow

How to Add a click Event Listener to nested class element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related