0
250
ViewsHow to loop through values within an array, and display them onto the page, each time?
I am currently on The Library project step 3:
Write a function that loops through the array and displays each book on the page. You can display them in some sort of table, or each on their own “card”.
I am seeing errors. Within my displayBooks() function, I am using a .forEach method to loop through each book pushed into myLibrary array and set paragraphs to the values, I am then using a styleBooks() function to give these paragraphs classes for styling. Then in addBookToLibrary(), I am calling these functions.
. After I fill out a form and submit I notice my card is blank, once I fill out a form again, the computer isn't making individual cards for each book and is only overriding the first card. How can I make it this isn't the case? Full code(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);
1 answers
Answer question0
Try to replace const with let. Const Variables cannot be modified
Current:
bookSumbit.addEventListener("click", addBooktoLibrary);
Try:
let bookSubmit = document.querySelector(".submit");
bookSubmit.addEventListener("click", addBooktoLibrary);