0
249
Views¿Cómo recorrer los valores dentro de una matriz y mostrarlos en la página cada vez?
Actualmente estoy en el paso 3 del proyecto The Library:
Escriba una función que recorra la matriz y muestre cada libro en la página. Puede mostrarlos en algún tipo de tabla, o cada uno en su propia "tarjeta".
Estoy viendo errores. Dentro de mi función displayBooks() , estoy usando un método .forEach para recorrer cada libro insertado en la matriz myLibrary y establecer párrafos en los valores, luego estoy usando una función styleBooks() para dar clases a estos párrafos para el estilo. Luego, en addBookToLibrary() , estoy llamando a estas funciones. . Después de llenar un formulario y enviarlo, noto que mi tarjeta está en blanco, una vez que vuelvo a llenar un formulario, la computadora no crea tarjetas individuales para cada libro y solo anula la primera tarjeta. ¿Cómo puedo hacer que este no sea el caso? Código completo ( 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
Intenta reemplazar const con let. Las variables constantes no se pueden modificar.
Actual:
bookSumbit.addEventListener("click", addBooktoLibrary);Probar:
let bookSubmit = document.querySelector(".submit"); bookSubmit.addEventListener("click", addBooktoLibrary);