Why my addeventlistener only working in one button?

Question

Been stuck here all day long trying to debug what is wrong with my code. Why the eventlistener only work in One button? even though I am using class in querySelector.

I am using PHP to iterates ALL the data from my database hence also the button is being loop too.

PHP/HTML

<?php
    foreach ($employees  as $employee) {     

    ?>

    <td><?php echo $employee['name']?></td>
    <td>Php. <?php echo $employee['salary']?></td>
    <td><?php echo $employee['address']?></td>
    <td>
    <a href="#" class="btn btn-outline-info showBtn" name="showBtn" 
    id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View 
    Employee</a>
    </td>

    <?php }?>

JS

document.querySelector('.showBtn').addEventListener('click', () => {
    alert("test");
    })

buttons to all <td> should alert but it only working in the first button. can someone enlighten me?

Answer 1

querySelector only retrieves the first element. Use querySelectorAll :

document.querySelectorAll('.showBtn').forEach(btn=>btn.addEventListener('click', () => {
  alert("test");
}))

Alternatively, add a single listener to the parent of all buttons.

 <div id = "body"> <a href="#" class="btn btn-outline-info showBtn" name="showBtn" id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a> <a href="#" class="btn btn-outline-info showBtn" name="showBtn" id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a> <a href="#" class="btn btn-outline-info showBtn" name="showBtn" id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a> </div> <script> document.querySelector('#body').addEventListener('click', (e) => { if(e.target.tagName === "A") //fire only if it's <a></a> alert("test"); }) </script> 

Answer 2

You can use querySelectorAll which will return matching class list and then using forEach to loop through the classes and add click event. Working example :

 document.querySelectorAll('.showBtn').forEach(link => link.addEventListener('click', () => { alert("test"); })) 

 <a href="#" class="btn btn-outline-info showBtn" name="showBtn" id="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a> <br/> <a href="#" class="btn btn-outline-info showBtn" name="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a><br/> <a href="#" class="btn btn-outline-info showBtn" name="showBtn" data-toggle="modal" data-target=".bd-example-modal-lg">View Employee</a> 

Answer 3

As per MDN:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors.

If you have multiple buttons sharing your 'showBtn' class then you can use querySelectorAll to instead return each one in a list. You can then iterate over that list to add your event listener to each one.

See the MDN page for querySelectorAll for more information.

Answer 4

querySelectorAll

for select multi Dom element

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

elements=[...document.querySelectorAll('.showBtn')];


elements.forEach((el)=>{

el.onclick=function(){

el.style.color='red';
console.log(el)
}
});