1

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

lista desplegada en pantalla

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.

1
  • Tienes que alcanzar todos los elementos, por ejemplo con 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).
    – A. Cedano
    Commented el 3 nov. 2020 a las 14:27

1 respuesta 1

2

Dos cosas:

  • Al crear tu tabla en un bucle con el atributo id de los botones como un literal/constante, todos los botones tienen el mismo ID, lo que no es correcto (el campo id debe ser único en todo el documento HTML). Te aconsejo usar una clase en lugar de id.

  • querySelector devuelve el primer elemento que cumpla con los criterios de búsqueda. Deberías usar querySelectorAll para obtener todos los resultados posibles, que devuelve una colección, e iterar colección para añadir a todos los elementos el event listener:

    // usando una clase
    formEditDel.querySelectorAll('button.buttonDelete').forEach(button => {
      button.addEventListener('click', markDeleted);
    });
    
2
  • mil gracias por la pronta respuesta. Habia intentado poner el ID en forma dinamica pero no supe como llamarlo desde JS e intente con una clase pero no se porque cuando quiero utilizar una clase en vez de un id no me responde. Acado de hacer lo que me dijiste y solo funciona con el primer registro, los demas los ignora por completo.
    – dgoldfeder
    Commented el 3 nov. 2020 a las 15:15
  • Puse un console.log() para que me mostrara la consola la lista de todos los botones y solo me envia uno solo. NodeList(1) ​0: <button class="buttonDelete" type="submit"> ​length: 1 ​<prototype>: NodeListPrototype { item: item(), keys: keys(), values: values(), … } ​
    – dgoldfeder
    Commented el 3 nov. 2020 a las 15:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.