Estoy trabajando en una aplicación de biblioteca de libros en la que los usuarios pueden agregar libros, etc., y actualizar si el libro se ha leído o no haciendo clic en un botón.

El botón cambia de estilo y contenido de texto en función de un evento de clic de botón. Funciona y actualiza la interfaz de usuario del botón, así como el campo de estado de cada libro, pero tan pronto como se guarda en el almacenamiento local y la página se vuelve a cargar, el botón se reinicia y no tiene en cuenta el campo de estado, no lo hará. actualícelo más después de cargarlo desde el almacenamiento local.

aquí está el código responsable de actualizar el estado de lectura y eliminar libros (que funciona bien):

 function bookEdit(event) { if (event.target.classList.contains("book__read-button")) { console.log(event.target); event.target.classList.toggle("clicked"); event.target.textContent = event.target.textContent == "Unread" ? "Read" : "Unread"; localStorage.setItem("library", JSON.stringify(library)); //update object if (event.target.parentNode._book) event.target.parentNode._book.status = event.target.textContent; localStorage.setItem("library", JSON.stringify(library)); console.log(library); } //-------------------Deleting Books -------------------------- if (event.target.matches(".book__delete-button")) { const bookElement = event.target.parentElement; bookCards.removeChild(bookElement); const position = library.indexOf(event.target.parentNode._book); library.splice(position, 1); localStorage.setItem("library", JSON.stringify(library)); if (bookCards.children.length === 0) { bookCards.innerHTML = ""; } console.log(library); } }

aquí está el JSFiddle en caso de que quiera ver la aplicación completa.

https://jsfiddle.net/chili6/182tkLrx/14/

gracias de antemano