我有一個簡單的表格，在該表格中，每一行都是用本地存盤的資料添加的（使用innerHTML）。每一行都包含一個編輯按鈕。當我用類名查詢SelectAll編輯按鈕時，它回傳的是空值，這沒有任何意義。
在這里，Total_Users是存盤的物件陣列，每個物件傳遞給應用包含按鈕的innerHTML的addToUserList()。隨著檔案的加載，資料被呈現出來，但querySelectorAll在搜索 "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-edit text-success btn editButt" data-bs-toggle="modal" data-bs-target="#edit">< /i> </td>`;
list.appendChild（row）。
}
}
//Fill with previous stored data（填充之前的資料）。
document.addEventListener('DOMContentLoaded', Load_Users) 。
function Load_Users(/span>) {
let Total_Users;
if (localStorage.getItem('Total_Users') ==null) {
Total_Users = [];
} else {
Total_Users = JSON. parse(localStorage.getItem('Total_Users' /span>))。
}
Total_Users.forEach(item =>{
Show.addToUserList（item）。
})
}
//querySelector editButt。
//在這里找不到什么。
let editElem = document.querySelectorAll(' .editButt')。
console.log（editElem）。
uj5u.com熱心網友回復：
你需要檢查事件 "DOMContentLoaded "是否準備好了，例如：
if（document. readyState === "complete" || document.readyState === "loading") {
//檔案已經準備好了。
//你的查詢選擇器在這里。
let editElem = document.querySelectorAll(' .editButt')。
console.log（ editElem）。
}
在這里詳細查看這個問題的答案：
uj5u.com熱心網友回復：
你可以嘗試首先選擇 "#table-body"，然后使用querySelectorAll()來搜索表格元素。試試下面的方法：
let container = document. querySelector('#table-body') 。
let editElem = document.querySelectorAll（'.editButt'）。
如果這不起作用，請嘗試使用老式的getElementsByClassName選擇器，我以前在querySelectorAll()中遇到過這個問題，最后我使用了這樣的方法：
var editElem = document. getElementsByClassName('editButt') 。
如果這些都不適合你，我建議在你試圖選擇的任何元素上添加一個id。這樣你就能確定你在選擇那個特定的元素。
document.querySelectorAll() | MDN Web Docs
document.getElementsByClassName() | MDN Web Docs
uj5u.com熱心網友回復：
在load_Users()函式中，querySelector作業正常。
function Load_Users（/span>）{
....
editElements（）。
deleteElements()。
}
function editElements（）{
let editElem = document.querySelectorAll(' .editButt') 。
console.log(editElem.length)。
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/320417.html
標籤：
上一篇：MARIE:如何列印一個名字
下一篇：避免DOM變化被合并在一起