I'm adding a Click Event to a Button and I need to get the parent of this Button and after that I need to get a specific child of this parent.

The issue also is that I have multiple of these buttons with its correspondant containers and childs.

I was able to add a Click Event for each button but i can't seem to get the elements of these buttons independently.

HTML

<div class="parentContainer">
     <div class="otherElement"></div>

     <a class="button">

     <div class="childElement"></div>
</div>

JS

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

for (let i = 0; i < button.length; i++){
    button[i].addEventListener('click', function(){

        var container = this.closest('.parentContainer');
        var j = 0;

        for(j = 0; j < container.length; j++){ 
            if(j.classList.contains('childElement')){
                j.classList.add('Example')
            } else {
                container.style.background = "white";
            }
        };
    });
}

For the specific button clicked, its brother element (childElement) should get a class of "Example".

I'm adding a Click Event to a Button and I need to get the parent of this Button and after that I need to get a specific child of this parent.

The issue also is that I have multiple of these buttons with its correspondant containers and childs.

I was able to add a Click Event for each button but i can't seem to get the elements of these buttons independently.

HTML

<div class="parentContainer">
     <div class="otherElement"></div>

     <a class="button">

     <div class="childElement"></div>
</div>

JS

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

for (let i = 0; i < button.length; i++){
    button[i].addEventListener('click', function(){

        var container = this.closest('.parentContainer');
        var j = 0;

        for(j = 0; j < container.length; j++){ 
            if(j.classList.contains('childElement')){
                j.classList.add('Example')
            } else {
                container.style.background = "white";
            }
        };
    });
}

For the specific button clicked, its brother element (childElement) should get a class of "Example".

• javascript
• html
• ecmascript-6

• It might help us answer with better suggestions if we understand what you're trying to achieve as an end result - Do you want to style the child elements? Are you triggering an async function to do some work? Are you needing to affect the state of another element to trigger other functions? – Tom 'Blue' Piddock Commented Sep 3, 2019 at 15:53
• I'm trying to add a Class to the ".childElement" as an end result. – Mat Mol Commented Sep 3, 2019 at 17:49

3 Answers 3

You could simplify this a bit by using event delegation technique - this way your code only requires a single event handler instead of a distinct handler for each and every "button" in your code. Once your event handler is set up, you can take advantage of the DOM API to find the .otherElement element under the appropriate parent element. I added a couple of "buttons" to your code to show how this works nicely no matter how many "buttons" you add:

const log = e => {
  console.clear();
  console.log(`${e.target.parentNode.previousElementSibling.dataset.about}`);
};
document.querySelector('.parentContainer').addEventListener('click', e => {
  if (e.target.classList.contains('childElement')) {
    e.target.classList.toggle('example');
    log(e);
  }
});

.example {
  color: green;
  font-size: 32px;
  font-weight: bold;
}

<div class="parentContainer">
  <div class="otherElement" data-about="This is otherElement for Button 1"></div>
  <a class="button">
    <div class="childElement">Button 1</div>
  </a>
  <div class="otherElement" data-about="This is otherElement for Button 2"></div>
  <a class="button">
    <div class="childElement">Button 2</div>
  </a>
  <div class="otherElement" data-about="This is otherElement for Button 3"></div>
  <a class="button">
    <div class="childElement">Button 3</div>
  </a>
  <div class="otherElement" data-about="This is otherElement for Button 4"></div>
  <a class="button">
    <div class="childElement">Button 4</div>
  </a>
  <div class="otherElement" data-about="This is otherElement for Button 5"></div>
  <a class="button">
    <div class="childElement">Button 5</div>
  </a>
</div>

You can do it a bit simpler

// check if there is at least one .button (this prevents javascript errors)
if (document.querySelector('.button')) {

  // select all buttons, each as el
  document.querySelectorAll('.button').forEach(function(el) {

    // bind click event to each el
    el.addEventListener('click', function (e) {
    
      // check also if there is at least on .childelement
      // e.target is the clicked element, parentNode the parent, from there find .childElement
      if (e.target.parentNode.querySelector('.childElement')) {
        e.target.parentNode.querySelector('.childElement').classList.add('Example');
      }
      else {
        e.target.parentNode.style.background = 'white';
      }
      
    });

   });

}

<div class="parentContainer">
     <div class="otherElement">otherElement</div>

     <a class="button">button</a>

     <div class="childElement">childElement</div>
</div>

You can use jQuery to do this with something similar to this:

jQuery('button').click(function(){
    jQuery(this).next().addClass('example');
});

In the scenario I have written here, I am presuming your html looks like this:

<div>
    <button></button>
    <div></div>
</div>

<div>
    <button></button>
    <div></div>
</div>