CODEWITHSUNDEEP
javascript
user4609276
user4609276

Reputation:

Target children within "this" parent

Assume I have 2 groups of divs -- both with click buttons, which when clicked, it will change the text content of the child within that group.

How can I accomplish that with pure javascript?

Thanks in advance

HTML

<div class="parent">
  <button>Click</button>
  <div class="child">Test1</div>
  <div class="child">Test4</div>
</div>

<div class="parent">
  <button>Click</button>
  <div class="child">Test2</div>
  <div class="child">Test5</div>
</div>

Javascript

var button = document.querySelectorAll("button");

for(i = 0; i < button.length; i++){
    button[i].addEventListener("click", function(){
        var parent = document.querySelectorAll(".parent");
        var child = parent.querySelector(".child:nth-child(2)");
        this.child.textContent = "success"; //just made up to show what I'm trying to accomplish
    });
}

Upvotes: 1

Views: 98

Answers (2)

Angelos Chalaris
Angelos Chalaris

Reputation: 6767

Simply use the this keyword to figure out which button is clicked, then get its .parentNode and afterwards its .children, select the second one ([1]) and change the text, like so:

var button = document.querySelectorAll("button");

for(i=0; i < button.length; i++) {
    button[i].addEventListener("click", function() {
        this.parentNode.children[1].innerHTML = 'success';
    });
}
<div class="parent">
  <button>Click</button>
  <div class="child">Test1</div>
  <div class="child">Test4</div>
</div>

<div class="parent">
  <button>Click</button>
  <div class="child">Test2</div>
  <div class="child">Test5</div>
</div>

Upvotes: 0

kind user
kind user

Reputation: 41893

Assuming that you want to change only the first div element inside parent, here's one approach:

var button = document.getElementsByTagName("button");

Array.from(button).forEach(v => v.addEventListener('click', function() {
  this.parentNode.children[1].innerHTML = 'success';
}));
<div class="parent">
  <button>Click</button>
  <div class="child">Test1</div>
  <div class="child">Test4</div>
</div>

<div class="parent">
  <button>Click</button>
  <div class="child">Test2</div>
  <div class="child">Test5</div>
</div>

Upvotes: 2

Related Questions