Tengo una lista de usuarios y al desplegar le adhiero dos botones uno para borrar y el segundo para editar, mi problema es que el addEventListener solo me detecta el primer registro desplegado y los demas los ignora por completo.
Este es el codigo que depliega la lista
<table id="userList">
<thead class="thead-inverse">
<tr>
<th scope="col">usuario/eMail</th>
<th scope="col">a. paterno</th>
<th scope="col">a. materno</th>
<th scope="col">nombre</th>
<th scope="col">tel. móvil</th>
<th scope="col">borrar o editar</th>
</tr>
</thead>
<tbody>
<?php for( $i = 0; $i < count($users->datos); $i++ ): ?>
<tr>
<td style="padding: 0 20px;"><?php echo $users->datos[$i]["email" ]; ?></td>
<td style="padding: 0 20px;"><?php echo $users->datos[$i]["paterno"]; ?></td>
<td style="padding: 0 20px;"><?php echo $users->datos[$i]["materno"]; ?></td>
<td style="padding: 0 20px;"><?php echo $users->datos[$i]["nombre" ]; ?></td>
<td style="padding: 0 20px;">
<?php
echo preg_replace(PHONE_NUMBER, "($1) $2-$3", $users->datos[$i]["movil"]);
?>
</td>
<td id="botones">
<form id="ed" method="POST">
<input type="hidden" id="token" name="token" value="<?php echo $users->datos[$i]["tokenA"]; ?>">
<button type="submit" id="buttonDelete"><i class="fas fa-trash-alt"></i></button>
<button type="submit" id="buttonEdit" ><i class="fas fa-edit" ></i></button>
</form>
</td>
</tr>
<?php endfor; ?>
</tbody>
</table>
La imagen siguiente es como la depliega
Este es el codigo javascript que estoy utilizando
const formEditDel = document.querySelector('form#ed');
const userDel = formEditDel.querySelector("button#buttonDelete");
const userEdit = formEditDel.querySelector('button#buttonEdit' );
eventListeners();
function eventListeners(event) {
if (userDel) {
userDel.addEventListener('click', markDeleted);
}
if (userEdit) {
userEdit.addEventListener('click', userEdited);
}
}
Como lo comente anteriormente solo le hace caso al primer registro desplegado, si yo quiero eliminar o editar el cuarto registro por ejemplo no lo hace y en consola de JS del browser no despliega algo.
De antemano muchas gracias por cualquier ayuda y/o consejo.
querySelectorAll()
y luego asignarles el listener. No veo que estés agrupando los elementos de ningún modo, asignándole por ejemplo la misma clase. Puedes alcanzarlos también por tipo de elemento (tr
,td
, etc).