Tengo una tabla simple, en esa tabla, se agrega cada fila (usando innerHTML) con datos del almacenamiento local. Cada fila contiene un botón de edición. Cuando consulto los botones de edición SelectAll con el nombre de la clase, devuelve un valor nulo que no tiene sentido.
Aquí, Total_Users es la matriz almacenada de objetos, cada objeto pasa a addToUserList() que aplica el HTML interno que contiene un botón. Con el documento cargado, se presentan los datos pero querySelectorAll devuelve nulo en busca de "editButt". Como los datos se presentan en DOM, varios botones deberían ser un resultado que no obtuve ...
// DOM class Show { static addToUserList(user) { let list = document.querySelector('#table-body'); //just a table let row = document.createElement('tr'); row.innerHTML = `<td>${user.name}</td> <td>${user.email}</td> <td>${user.phone}</td> <td>${user.role}</td> <td class="text-center mx-auto"> <i class="fa fa-edit text-success btn editButt" data-bs-toggle="modal" data-bs-target="#edit"></i> </td>`; list.appendChild(row); } } //Fill with previously stored data document.addEventListener('DOMContentLoaded', Load_Users); function Load_Users() { let Total_Users; if (localStorage.getItem('Total_Users') === null) { Total_Users = []; } else { Total_Users = JSON.parse(localStorage.getItem('Total_Users')); } Total_Users.forEach(item => { Show.addToUserList(item); }) } // querySelector editButt // find nothing here let editElem = document.querySelectorAll('.editButt'); console.log(editElem);Debe verificar si el evento "DOMContentLoaded" está listo, por ejemplo:
if (document.readyState === "complete" || document.readyState === "loaded") { // document is already ready to go // your query selector here: let editElem = document.querySelectorAll('.editButt'); console.log(editElem); }verifique la respuesta a esta pregunta en detalle aquí:
Primero puede intentar seleccionar "#table-body" y luego usar querySelectorAll() para buscar a través del elemento de la tabla. Intente algo a lo largo de estas líneas:
let container = document.querySelector('#table-body'); let editElem = document.querySelectorAll('.editButt');Si eso no funciona, intente usar el antiguo selector getElementsByClassName, he tenido este problema con querySelectorAll() antes y terminé usando algo como esto:
var editElem = document.getElementsByClassName('editButt');documento.querySelectorAll() | Documentos web de MDN
documento.getElementsByClassName() | Documentos web de MDN
Dentro de la función load_Users(), el querySelector funciona bien aquí:
function Load_Users(){ .... editElements(); deleteElements(); } function editElements(){ let editElem = document.querySelectorAll('.editButt'); console.log(editElem.length); ... }