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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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";
}));

CodePudding user response：

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!