Question 43745 in Html Question posted in
Some basic documentation can be found here.

How to get clicked item's child text using javascript – Html

Here is the code that I am trying, the DOM structure will be same.
The DOM in loaded dynamically, that why I am trying with document click. We need to get the colour of the current clicked box. With jQuery its easy, unable find solution in javaScript. Can anyone help to resolve this?

document.addEventListener("click", function(e){
    const CTABtn = e.target.closest(".btn"); 

    if(CTABtn){
      alert('the color of the box');
    }

});
.container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
}
.box{
   border:1px solid black;
   padding:5px;
}
<div class="container">
  <div class="box">
    <div>
      <h1>Red</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
  <div class="box">
    <div>
      <h1>Green</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
<div class="box">
    <div>
      <h1>Blue</h1>
    </div>
    <div>
      <button class="btn">Blue</button>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    You’re on the right track with closest, but what you want to do is find the closest containing .box (rather than .btn) and then, from there, find the h1 element in the box to get the text from it:

    const box = e.target.closest(".box"); 
const h1 = box && box.querySelector("h1");

if (h1) {
    alert(h1.textContent);
}

    document.addEventListener("click", function(e){
    const box = e.target.closest(".box"); 
    const h1 = box && box.querySelector("h1");

    if (h1) {
        alert(h1.textContent);
    }
});
    .container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
}
.box{
   border:1px solid black;
   padding:5px;
}
    <div class="container">
  <div class="box">
    <div>
      <h1>Red</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
  <div class="box">
    <div>
      <h1>Green</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
<div class="box">
    <div>
      <h1>Blue</h1>
    </div>
    <div>
      <button class="btn">Blue</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    It would be a lot easier if you just added the color as a data attribute on the button.

    document.addEventListener("click", function(e){
    const ctaBtn = e.target.closest(".btn[data-color]"); 

    if(ctaBtn){
      console.log(ctaBtn.dataset.color);
    }

});
    .container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
}
.box{
   border:1px solid black;
   padding:5px;
}
    <div class="container">
  <div class="box">
    <div>
      <h1>Red</h1>
    </div>
    <div>
      <button class="btn" data-color="red">CTA</button>
    </div>
  </div>
  <div class="box">
    <div>
      <h1>Green</h1>
    </div>
    <div>
      <button class="btn" data-color="green">CTA</button>
    </div>
  </div>
<div class="box">
    <div>
      <h1>Blue</h1>
    </div>
    <div>
      <button class="btn" data-color="blue">Blue</button>
    </div>
  </div>
</div>

    There are multiple ways to do what you want to do, you can access the parent and get the child or reference a sibling

    document.addEventListener("click", function(e){
    const ctaBtn = e.target.closest(".btn"); 

    if(ctaBtn){
      console.log(ctaBtn.closest(".box").querySelector("h1").textContent);
    }

});
    .container{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-evenly;
}
.box{
   border:1px solid black;
   padding:5px;
}
    <div class="container">
  <div class="box">
    <div>
      <h1>Red</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
  <div class="box">
    <div>
      <h1>Green</h1>
    </div>
    <div>
      <button class="btn">CTA</button>
    </div>
  </div>
<div class="box">
    <div>
      <h1>Blue</h1>
    </div>
    <div>
      <button class="btn">Blue</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    There is another, but a bit more complicated way of doing that:

    const elements = document.querySelectorAll('.box');

for (let i = 0; i < elements.length; i++) {
    let curr = elements[i];
    curr.onclick = () => {
        alert(curr.firstElementChild.firstElementChild.innerText);
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search