我正在重建一個(gè)待辦事項(xiàng)列表應(yīng)用程序,并嘗試使用面向?qū)ο缶幊蹋@對(duì)我來(lái)說(shuō)是新的。我已經(jīng)構(gòu)建了任務(wù)部分,但我無(wú)法找到“刪除”按鈕。添加新任務(wù)時(shí),右側(cè)會(huì)顯示一個(gè)很棒的字體圖標(biāo)。我正在嘗試選擇它們,但每次函數(shù)運(yùn)行時(shí)我都會(huì)得到一個(gè)空的節(jié)點(diǎn)列表:Codepen:待辦事項(xiàng)列表重現(xiàn):添加任務(wù),然后檢查控制臺(tái)。您將看到一個(gè)空的節(jié)點(diǎn)列表。我嘗試過(guò)的:現(xiàn)在,我正在嘗試簡(jiǎn)化console.log該元素。console.log(buttons)每次該方法運(yùn)行時(shí)我都會(huì)運(yùn)行addTask()。這是完整的 JS:const submit = document.querySelector("#commit-task"),? results = document.querySelector("#task-results"),? input = document.querySelector("#input-task"),? buttons = document.querySelectorAll(".fa-times");? // These are what I'm trying to selectclass Task {? constructor(task) {? ? this.taskText = task;? }? addTask() {? ? const text = input.value;? ? ui.clearInput();? ? const taskBody = `<div class="task">? ? ? ? <span>${text}</span>? ? ? ? ? ? <span>? ? ? ? ? ? ? <i class="fas fa-check" style="color: green;"></i>? ? ? ? ? ? ? <i class="fas fa-times" style="color: red;"></I> //This is the element I'm trying to select? ? ? ? ? ? </span>? ? </div>`;? ? results.innerHTML += taskBody;? ? console.log(buttons); //Here's where the Console.log statement is run? }}class UI {? clearInput() {? ? input.value = "";? ? input.focus();? }}const newTask = new Task();const ui = new UI();// Add Event Listeners:submit.addEventListener("click", () => {? newTask.addTask(); //Here is when addTask() is run.});input.addEventListener("keyup", (e) => {? if (e.keyCode === 13) {? ? newTask.addTask();? }});為什么 JavaScript 認(rèn)為這些按鈕不在 DOM 中?提前致謝。
QuerySelectorAll 使用 OOP 返回空節(jié)點(diǎn)列表
慕姐8265434
2023-06-29 21:03:10