Im new at this and still confuse about my problem, so here is a table for my php
<table>
<tr>
<th align="center">ID</th>
<th align="center">Project Name</th>
<th align="center">Due Date</th>
<th align="center">Sub Date</th>
<th align="center">Comment</th>
<th align="center">Status</th>
<th align="center">Option</th>
</tr>
<tr>
<?php
while ($res2=mysqli_fetch_assoc($result2)) {
echo "<tr>";
echo "<td>".$res2['project_id']."</td>";
echo "<td>".$res2['project_name']."</td>";
echo "<td>".$res2['duedate']."</td>";
echo "<td>".$res2['subdate']."</td>";
echo "<td>\"".$res2['comment']."\"</td>";
echo "<td>".$res2['status']."</td>";
//as you can see, id = myId
echo "<td><a href=\"#\" id=\"myId\" class=\"button\">View</a>";
}?>
</td>
</tr>
</table>
supposedly when button next to each row is clicked, a popup window will appear but only the first row works, and the other buttons do nothing. I did search for this problem like 2 hours already, most of them talk about unique id, but how can I implement or fix for this problem.
Here is a script for this
document.getElementById('myId').addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
});
I would really appreciate for your help, thanks a lot.
Firstly, you should just use unique ID for every HTML elements, if you intend to create multiple elements with same behavior, use class instead.
After you change it to class, you can select all the elements work by assigning once by using querySelectorAll().
Here is the working example:
document.querySelectorAll('button.click').forEach(elem =>
{
elem.addEventListener('click', () => {
document.querySelector('div').style.background = elem.innerText;
});
});div {
width: 200px;
height: 200px;
}<button id="1" class="click">green</button>
<button id="2" class="click">blue</button>
<div></div>Ids should be unique. You should not use twice the same id in a page. Classes serves that purpose.
So first, we should add a class on every buttons that tells us that this button is used to show the modal. And we also remove the id, as it would not be unique and is also useless here.
echo "<td><a href=\"#\" class=\"modal-button button\">View</a>";
Then, to add the listener, we want to target every buttons that has this new “modal-button” we just added. The right way to do so, would be to target elements with the class, iterate over them and add the listener.
document.getElementsByClassName(‘modal-button’).forEach(button => {
button.addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
});
})
Hopefully this helps!
you can try:
[].slice.call(document.querySelectorAll('[id^="myId"]'))
.map(el => el.addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
}));
and you should change your code:
$i = 0;
while ($res2=mysqli_fetch_assoc($result2)) {
......
//as you can see,
echo "<td><a href=\"#\" class=\"class-{++$i}\" class=\"button\">View</a>";
}
now, js code:
[].slice.call(document.querySelectorAll('[class^="class-"]'))
.map(el => el.addEventListener("click", function () {
document.querySelector('.bg-modal').style.display = "flex";
}));