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"; })
Advertisement
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', ...) }