Access child element by id

JavaScript
1

if i have this in my HTML

<div class="answerBox">
      <h2>B)</h2> <hr/>
      <p id="answerB">Lorem ipsum dolor sit amet. lorem15</p>
</div>

I have a couple elements like the one above with the same class on the div. but different ID’s on the p element.
How can i make an event listener on click that when the div with the class of answerBox is clicked, i want to check if the ID of the p element inside it is equal to “answerB” ?

i have this so far but i dont know what to place inside the event listener

let answersArray = document.querySelectorAll(".answerBox");
  //console.log(answersArray)
  answersArray.forEach(function(answer) {
      answer.addEventListener("click", function() {
         // ?
      });
  });
2 
answersArray.forEach(function(answer) {
  answer.addEventListener("click", function(e) {
    if (e.target.lastChild.id === "answerB") {
      //dostuff
    }
  });
});

The event listener callback takes one argument, the event object itself, which contains large amounts of useful information about the event. The target property is the element that the event has been dispatched to, eg the element that triggered the event (in this case, a div with the class answerBox).

I’d maybe want to be a bit more specific than using lastChild, but once you have the element that e.target represents, you can then check it in any way.

3

Yes but with this way i have to click on the text of the “p” element to trigger the eventListener now. I want the whole <div class=".answerBox"> to trigger the eventListener on click

4

You don’t though? The whole thing triggers on click because that’s what the event listener is attached to

EDIT: sorry again, did that without testing, should be currentTarget, not target (ie the thing the event listener is attached to)

I did make an error though, sorry, lastChild will be a text node, which is not what you want, should be (getting the last actual element, not the last DOM node):

let answersArray = document.querySelectorAll(".answerBox");
answersArray.forEach(function(answer) {
  answer.addEventListener("click", function(e) {
    let answerText = e.currentTarget.children[e.currentTarget.children.length - 1];
    if (answerText.id === "answerB") {
      console.log('hiya')
    }
  });
});

https://codepen.io/DanielCouper/pen/qwoVrr

5

Nvm disregard. The CSS tricked me into thinking they were grouped differently.

I personally believe:
let answerText = e.target.closest('.answerBox').querySelector('p');
is a bit easier to read.