¿Cómo se actualiza el valor del texto de entrada en función de la entrada del usuario y se muestra el valor? (Característica de actualización/guardado de la aplicación CRUD)

10 Jun, 2023 Programación 0

Actualmente estoy construyendo una aplicación CRUD para que los usuarios puedan realizar un seguimiento de los libros que han leído o no. Actualmente estoy tratando de implementar una función de actualización/edición para que el usuario pueda actualizar la información del libro si lo desea. El problema que tengo es que cada vez que intento guardar la información del libro después de cambiar los valores de entrada, el último libro en el array “myLibrary” obtendría la información en lugar del libro actual que estoy tratando de actualizar. La única vez que el libro actual obtiene la entrada del usuario es cuando es el único libro en el array 🙁

Intenté usar el método de array splice() para reemplazar el libro actual con un nuevo libro que tenga la nueva información/valores, pero todavía tengo el mismo problema.

// clase Book: representa un libro

class Book {
constructor(title, author, pages, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.read = read;
}
}

// array para almacenar libros.. libros por defecto usando el Constructor Book

let myLibrary = [{
title: ‘Materia Oscura’,
author: ‘Blake Crouch’,
read: ‘leído’,
pages: 342,
},
{
title: ‘1984’,
author: ‘Geroge Orwell’,
read: ‘no leído’,
pages: 328
},
];

/* guarda la entrada de usuario actualizada al hacer clic y cierra el modal
elimina el libro del array de la biblioteca y agrega el libro actualizado al array de la biblioteca y lo guarda en el almacenamiento local nuevamente con la información actualizada del usuario en los campos del formulario en la ventana del modal y cierra la ventana del modal después del envío de los campos del formulario */

saveBtn.addEventListener(‘click’, (index) => {
myLibrary.splice(myLibrary.indexOf(index), 1);
addBookToLibrary();
setData();
render();
document.querySelector(‘.modal’).classList.add(‘modal–hidden’);
hideBackgroundFade();
clearForm();
});

Clip de la interfaz de usuario que muestra el error:

function render() { const booksContainer = document.querySelector('.books-container'); booksContainer.innerHTML = ''; myLibrary.forEach((book, index) => { const bookElement = document.createElement('div'); bookElement.classList.add('book'); bookElement.setAttribute('data-index', index); // ...rest of the code }

saveBtn.addEventListener('click', (event) => { const bookElement = event.target.closest('.book'); const index = bookElement.getAttribute('data-index'); myLibrary[index].title = titleInput.value; myLibrary[index].author = authorInput.value; myLibrary[index].pages = pagesInput.value; myLibrary[index].read = readInput.checked ? 'leído' : 'no leído'; setData(); render(); document.querySelector('.modal').classList.add('modal--oculto'); hideBackgroundFade(); clearForm(); });

Answer

davy.ai

June 10, 2023 at 3:52 pm
Parece que el problema está en la forma en que se está pasando el parámetro de índice al evento saveBtn. El parámetro de índice no se está capturando correctamente y, por lo tanto, está causando que se actualice el libro equivocado.

Para solucionarlo, puede agregar un atributo de datos a cada elemento de libro en la interfaz de usuario que corresponda a su índice en el array myLibrary. Luego, cuando se hace clic en saveBtn, puede leer el atributo de datos del elemento de libro que activó el evento para obtener su índice en el array. Luego puede usar este índice para actualizar el libro correcto en el array.

Aquí hay un ejemplo de cómo puede agregar el atributo de datos a cada elemento de libro:
```
function render() {
  const booksContainer = document.querySelector('.books-container');
  booksContainer.innerHTML = '';

  myLibrary.forEach((book, index) => {
    const bookElement = document.createElement('div');
    bookElement.classList.add('book');
    bookElement.setAttribute('data-index', index);
    // ...rest of the code
}
```
Y aquí está cómo puede actualizar el evento saveBtn para usar el índice del atributo de datos:
```
saveBtn.addEventListener('click', (event) => {
  const bookElement = event.target.closest('.book');
  const index = bookElement.getAttribute('data-index');

  myLibrary[index].title = titleInput.value;
  myLibrary[index].author = authorInput.value;
  myLibrary[index].pages = pagesInput.value;
  myLibrary[index].read = readInput.checked ? 'leído' : 'no leído';

  setData();
  render();
  document.querySelector('.modal').classList.add('modal--oculto');
  hideBackgroundFade();
  clearForm();
});
```
Con estos cambios, la función de actualización/edición debería funcionar correctamente y actualizar el objeto de libro correcto en el array myLibrary.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo se actualiza el valor del texto de entrada en función de la entrada del usuario y se muestra el valor? (Característica de actualización/guardado de la aplicación CRUD)

Answer

davy.ai