I have a forEach method that has a function(displayBook) where it displays details of a book from an Array created from a Constructor class.
myLibrary.forEach(Book => {
displayBook(Book)
})
function displayBook (item) {
let div = document.createElement("div")
let listName = document.createElement("li")
let listPages = document.createElement("li")
let listRead = document.createElement("li")
let removeButton = document.createElement("button")
document.body.appendChild(div)
div.className = "bookCard"
listName.textContent = item.name
listPages.textContent = item.pages
listRead.textContent = item.read
div.appendChild(listName)
div.appendChild(listPages)
div.appendChild(listRead)
div.appendChild(removeButton)
removeButton.className = "removeButton"
removeButton.textContent = "Remove Book"
}
I have another function(addBookToLibrary) that asks for new data and add it into the array. Then calls the function(displayBook) to display the new data. This function creates another div as written but it does not get thew item.name, item.pages, and item.read of the new data. It also says
Uncaught TypeError: item is undefined
function addBookToLibrary(item) {
let bookName = prompt("Enter book name.")
let pageNumber = prompt("Enter number of pages.")
let readStatus = prompt("Have you read it?")
const newBook = new Book(bookName, pageNumber, readStatus)
myLibrary.push(newBook)
displayBook(item)
}