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?

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Mark Baijens, Oct 08 '20 at 07:26

score 0 · Answer 1 · answered Oct 08 '20 at 07:26

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>

score 0 · Answer 2 · answered Oct 08 '20 at 07:27

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>

score 0 · Answer 3 · answered Oct 08 '20 at 07:30

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>

Thanks! Now it actually only works when I click "question-text", but I need it work on .questions (that is container width: 100%;). — Sybrentjuh, Oct 08 '20 at 07:47

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

3 Answers3