Soy nuevo en esto y todavía estoy confundido acerca de mi problema, así que aquí hay una tabla para mi 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>supuestamente, cuando se hace clic en el botón al lado de cada fila, aparecerá una ventana emergente, pero solo funciona la primera fila, y los otros botones no hacen nada. Busqué este problema como 2 horas ya, la mayoría de ellos hablan de identificación única, pero ¿cómo puedo implementar o solucionar este problema?
Aquí hay un guión para esto
document.getElementById('myId').addEventListener("click", function () { document.querySelector('.bg-modal').style.display = "flex"; });Agradecería mucho su ayuda, muchas gracias.
En primer lugar, solo debe usar una identificación única para cada elemento HTML, si tiene la intención de crear varios elementos con el mismo comportamiento, use class en su lugar.
Después de cambiarlo a class , puede seleccionar todos los elementos que funcionan asignándolos una vez usando querySelectorAll() .
Aquí está el ejemplo de trabajo:
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>Los identificadores deben ser únicos. No debe usar dos veces la misma identificación en una página. Las clases sirven para ese propósito.
Entonces, primero, debemos agregar una clase en cada botón que nos diga que este botón se usa para mostrar el modal. Y también eliminamos el id, ya que no sería único y tampoco sirve aquí.
echo "<td><a href=\"#\" class=\"modal-button button\">View</a>";Luego, para agregar el oyente, queremos apuntar a todos los botones que tengan este nuevo "botón modal" que acabamos de agregar. La forma correcta de hacerlo sería apuntar elementos con la clase, iterar sobre ellos y agregar el oyente.
document.getElementsByClassName('modal-button').forEach(button => { button.addEventListener("click", function () { document.querySelector('.bg-modal').style.display = "flex"; }); })¡Ojalá esto ayude!
puedes probar:
[].slice.call(document.querySelectorAll('[id^="myId"]')) .map(el => el.addEventListener("click", function () { document.querySelector('.bg-modal').style.display = "flex"; }));y deberías cambiar tu código:
$i = 0; while ($res2=mysqli_fetch_assoc($result2)) { ...... //as you can see, echo "<td><a href=\"#\" class=\"class-{++$i}\" class=\"button\">View</a>"; }ahora, código js:
[].slice.call(document.querySelectorAll('[class^="class-"]')) .map(el => el.addEventListener("click", function () { document.querySelector('.bg-modal').style.display = "flex"; }));