How to target a Class inside div (automatically on click)

Question

I want to get all elements with class questions , give them an onclick and then target the specific clicked element. And in this clicked element I want to get the div with class answer-text and add class active.

My code for now:

 var getQuestions = document.querySelectorAll('.questions'); getQuestions.forEach(function(question) { question.addEventListener('click', function(e) { var target = e.target; var answer = target.getElementsByClassName('answer-text'); answer.classList.add('active'); }) });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div>

I think/know I'm really close to it working, but can't get the final step to make it work. Anyone knows how to fix this?

Answer 1

Delegate:

 document.getElementById('questions').addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("question-text")) { tgt.closest(".questions").querySelector('.answer-text').classList.add('active'); } });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div id="questions"> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div> </div>

Answer 2

read comment in code for explanation

 var getQuestions = document.querySelectorAll('.questions'); getQuestions.forEach(function(question) { question.addEventListener('click', function(e) { var target = e.target; // change the line: // var answer = target.getElementsByClassName('answer-text'); // to the following: var answer = this.closest('.questions').querySelector('.answer-text'); // what happens is: it goes up the DOM to the closest question // from where the click happened and looks inside the .questions for the .answer-text element answer.classList.add('active'); }) });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span><div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div>

Answer 3

Checking your html file, answer-text is belonged to .questions elements not on .question-text element.

So on each .question-text click event handler, to get the answer for the selected question, you need to get the parentElement of the selected .question-text and find the answer on that parent element.

And getElementsByClassName returns HTMLCollection so answer[0] will return the target answer element.

 var getQuestions = document.querySelectorAll('.questions'); getQuestions.forEach(function(question) { question.addEventListener('click', function(e) { var target = e.target; var answer = target.parentElement.getElementsByClassName('answer-text'); answer[0].classList.add('active'); }) });

 .answer-text { display: none; } .active { display: block; } .questions { padding: 20px; font-weight: 700; }

 <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Wat mag/kan wel en wat niet tijdens mijn uitje of vakantie? </div> <div class="answer-text"> Antwoord 6 </div> </div> <div class="questions"> <span class="icon icon-vu-arrow-top-stroke"></span> <div class="question-text"> Kan ik mijn uitje wijzigen? </div> <div class="answer-text"> Antwoord 7 </div> </div>