How to get child element in a Click Event

Question

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".

Answer 1

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> 

Answer 2

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:

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

 .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> 

Answer 3

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>