如何循環遍歷數組中的值，並將它們每次顯示到頁面上？

Question

我目前正在進行 The Library 項目第 3 步：

編寫一個 function 循環數組並在頁面上顯示每本書。 您可以將它們顯示在某種表格中，或者每個都顯示在自己的“卡片”上。

我看到錯誤。 在我的displayBooks() function 中，我使用.forEach方法遍歷推入myLibrary數組的每本書並將段落設置為值，然后我使用styleBooks() function 為這些段落提供樣式類。 然后在addBookToLibrary()中，我調用這些函數。 . 在我填寫表格並提交后，我發現我的卡片是空白的，一旦我再次填寫表格，計算機就不會為每本書制作單獨的卡片，只會覆蓋第一張卡片。 我怎樣才能做到這不是這種情況？ 完整代碼（ https://codepen.io/nolimitz71/pen/WNXGrjP ）

 let myLibrary = [ ]; function Book(title, author, pages, read) { this.title = title; this.author = author; this.pages = pages; this.read = read; } function displayBooks() { myLibrary.forEach((book) => { para1Text.innerHTML = book.title; para2Text.innerHTML = book.author; para3Text.innerHTML = book.pages; para4Text.innerHTML = book.read; }) } function styleBooks() { para1.classList.add('para-title'); para1.appendChild(para1Text); bookOutline.appendChild(para1); para2.classList.add('para-author') para2.appendChild(para2Text); bookOutline.appendChild(para2); para3.appendChild(para3Text); para3.classList.add('para-pages') bookOutline.appendChild(para3); para4.appendChild(para4Text); para4.classList.add("para-status") bookOutline.appendChild(para4); } function addBooktoLibrary() { let newBook = new Book(bookTitle.value, bookAuthor.value, bookPages.value, bookOptions.value); myLibrary.push(newBook); displayBooks() styleBooks() bookForm.onsubmit = e => { e.target.reset(); bookValues.style.display = "block"; }; bookForm.style.display = "none"; console.log(myLibrary) } bookSumbit.addEventListener("click", addBooktoLibrary);

Answer 1

嘗試用 let 替換 const。 Const 變量不能被修改

當前的：

bookSumbit.addEventListener("click", addBooktoLibrary);

嘗試：

let bookSubmit = document.querySelector(".submit");
bookSubmit.addEventListener("click", addBooktoLibrary);