QuerySelector null для элементов, которые существуют в локальном хранилище и видимой DOM

Question

У меня есть простая таблица, в которой каждая строка добавляется (с использованием innerHTML) с данными из локального хранилища. Каждая строка содержит кнопку редактирования. Когда я запрашиваю кнопки редактированияSelectAll с именем класса, он возвращает null, что не имеет смысла.

Здесь Total_Users - это сохраненный массив объектов, каждый объект передается в addToUserList (), который применяет innerHTML, содержащий кнопку. Когда документ загружен, данные представлены, но querySelectorAll возвращает null при поиске «editButt». Поскольку данные представлены в DOM, должно получиться несколько кнопок, которых я не получил ...

      // 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);

Answer 1

Вам нужно проверить, готово ли событие «DOMContentLoaded», например:

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

Подробно проверьте ответ на этот вопрос здесь:

Как определить, был ли запущен DOMContentLoaded

Answer 2

Вы можете попробовать сначала выбрать "#table-body", а затем использовать querySelectorAll() для поиска по элементу таблицы. Попробуйте что-нибудь в этом роде:

      let container = document.querySelector('#table-body');
let editElem = document.querySelectorAll('.editButt');

Если это не сработает, попробуйте использовать старомодный селектор getElementsByClassName, у меня раньше была эта проблема с querySelectorAll(), и в итоге я использовал что-то вроде этого:

      var editElem = document.getElementsByClassName('editButt');

Если ничего из этого не работает для вас, я предлагаю добавить идентификатор к любому элементу, который вы пытаетесь выбрать. Таким образом, вы точно знаете, что выбираете именно этот элемент.

document.querySelectorAll() | Веб-документы MDN

---

document.getElementsByClassName() | Веб-документы MDN

---

Answer 3

Внутри функции load_Users() querySelector отлично работает Здесь:

      function Load_Users(){
   ....
   editElements();
   deleteElements();
}

function editElements(){
   let editElem = document.querySelectorAll('.editButt');
   console.log(editElem.length);
   ...
}