Day 64.
Q. I don't get why the lesson tells me to make a function that loops through the array. What I mean is, shouldn't it be functionality that adds one book at a time? There shouldn't be a button that loops through the array and display all the book names, rather, it should be that when I click the 'add book' button, it should display that particular one input, no? Having problems with step 3, so thought I should check up on my understanding of the assignment.
https://www.theodinproject.com/lessons/node-path-javascript-library
\=> What this might have been meant to 'loop through the entire array because the user either would have removed/ added a new book in the array. When you click 'add new book', the whole array will have to get updated to the latest state of the myLibrary array.
Q. Is there a way to make each element a node when looping through an array? I'm trying to display the array's elements on the page when I click the button and was thought I could use appendChild
for appending each element to the page. But the problem is that book
is not a node, so it returns an error. I googled for ways to make each element into a node but couldn't find anything useful. Is this the right approach to tackle step three or should I be using a different DOM method?
function displayBook() {
myLibrary.forEach((book) => {
console.log(book);
//a way to make each element a node? // or just textContent?
list.appendChild(book); //book is not a node
});
}
\=> I can loop through the array and make a node, and insert text into it.
function displayBook() {
myLibrary.forEach((book) => {
const book = document.createElement('div');
list.appendChild(book);
});
}
\=> SyntaxError: Identifier 'book' has already been declared
\=> I'm passing a book
parameter and redefining it after. Should use different name for creating a node. const bookEl = document.createElement('div')