Popup won’t appear when clicked inside a table button

Can anyone suggest some alternative solution for this problem.

I’ve made a popup form which i use css and javascript to trigger the display to none or flex every time i click into a specific button which is great. But this method seems to not work on a table as you can see below i’ve done a simple query which i just fetch some of the essentials and included some buttons to use to trigger the popup form.

PHP/HTML CODE

                                <tbody>
                                    <?php
                                    $res=mysqli_query($link,"SELECT CONCAT(c.firstname, ' ', c.lastname) AS fullname, c.* FROM user_registration c");
                                    while($row=mysqli_fetch_array($res))
                                    {
                                            echo "<tr>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; ?> <img src="<?php echo $row["image"]; ?>" height="100" width="100"> <?php echo "</td>";
                                            echo "<td>"; echo $row["fullname"]; echo "</td>";
                                            echo "<td>"; echo $row["username"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; ?> <a href="#"><button class="btn btn-success" style="width: 100%">Accept</button></a><?php echo "</td>";
                                            echo "<td>"; ?> <a href="#" id="declineB"><button class="btn btn-danger" style="width: 100%">Decline</button></a><?php echo "</td>";
                                            echo "<td>"; ?> <a href="#"><button class="btn btn-success" style="width: 100%">View Message</button></a><?php echo "</td>";
                                            echo "</tr>";
                                    }
                                    ?> 
                                </tbody>

JAVASCRIPT CODE

document.getElementById("declineB").addEventListener("click", function(){
              document.querySelector(".popup3").style.display = "flex";
          })
          
          document.getElementById("closeDecB").addEventListener("click", function(){
              document.querySelector(".popup3").style.display = "none";
          })

Answer

When you have multiple elements with id declineB, document.getElementById("declineB") can actually only get the first element with id declineB. The effect you want will only appear when an element whose id is declineB. When click others, no click event will be triggered.

When you use css class, you can add click event to every html element of same class:

let elements = Array.from(document.getElementsByClassName('spacer'))
for (let element of elements) {
   element.addEventListener('click', ...)
}

Advertisement

Answer