Библиотека Javascript (Odin-Project): цикл по массиву ⇐ Javascript

[Anonymous]

Я застрял в проекте библиотеки для Одина. Я хочу выяснить, почему при вызове функции чтения она перебирает все книги и присваивает значение прочитано/непрочитано, даже если нажать «прочитано/непрочитано» только на одной. У меня очень начальные знания Javascript, и я был бы невероятно благодарен за любые советы/отзывы о том, как решить эту проблему.
Я пробежал отладчик точек останова, и кажется, что в строке let Mapped он повторяется в каждой книге. Однако моя функция удаления позже в сценарии не удаляет все книги, поэтому я не уверен, почему один и тот же код ведет себя по-разному.
TLDR: Использование .map в массиве циклически перебирает все книги и присваивает значение каждому объекту, а не только одному. Ищу советы/отзывы по улучшению.
Ниже приведен мой код. Вот репозиторий GitHub с инструкциями журнала, демонстрирующими ошибку:

https://github.com/kitkatz111/odin-project-books


const display = document.getElementById("libraryDisplay");
const bookName = document.getElementById("bookInput");
const bookAuthor = document.getElementById("bookAuthor");
const bookPages = document.getElementById("bookNumber");
var bookRead = document.getElementById("read");

//dialog box
const dialog = document.getElementById("dialog"); // dialogue popup
const addBook = document.getElementById("addBook"); // adds book to array
const openDialog = document.getElementById("seeDialog"); // opens dialogue box
const closeDialog = document.getElementById("addBook")

openDialog.addEventListener("click", () => {
dialog.showModal();
});

closeDialog.addEventListener("click", () => {
dialog.close();
})

let myLibrary = [];

addBook.addEventListener("click", () => {

display.innerHTML = "";
// this doesnt display current contents of the input box
let title = bookName.value; // checks array of books, creates input
let author = bookAuthor.value;
let page = bookPages.value;
let read = bookRead.checked; // check status inside of event listener)

if (read === true) {
read = "read";}
else {
read = "unread"}; // read or unread function dependant on checkbox

let uuid = self.crypto.randomUUID(); // assigns random uuid

myLibrary.push({ name: `${title}`, author: `${author}`, pages: `${page}`, read: `${read}`, uuid: `${uuid}`});
// pushes uuid and bookvalue name to array,, note read as checkbox will evaluate to T/F

for (var bookz of myLibrary){

display.innerHTML += `
Book Title
"${bookz.name}"
Author
${bookz.author}
Amount of Pages
${bookz.pages}
Status
${bookz.read}
UUID
${bookz.uuid}
Delete Book
`}});

display.addEventListener('click', (event) => {

if (event.target.tagName === 'BUTTON' && event.target.id.startsWith('readBook-')) {

const readStatus = event.target;

flip()

function flip() { // event passes the click event

const btn = readStatus;

if (btn.innerHTML === 'read') {
btn.innerHTML = 'unread';

let mapped = myLibrary.map(item => {

item.read = "unread";

})

// cant understand why it loops through each item, and why delete does not.
}

else {
if (btn.innerHTML === 'unread') {
btn.innerHTML = 'read';

let mapped = myLibrary.map(item => {

item.read = "read";
});
};

// smart way to reduce lots of if statements, if button
// is anything else WHEN CLICKED it returns read.
}
console.log(myLibrary.filter(book => book.read))
}

}
})
// moved read function inside of event handler logic

display.addEventListener('click', (event) => {

if (event.target.tagName === 'BUTTON' && event.target.id.startsWith('deleteBook-' + `${myLibrary.uuid}`)) {

const bookDiv = event.target.closest('.book'); // closest method traverses element & parents

if (bookDiv) { // checks if it is not null or undefined

const bookId = bookDiv.id; // uuid of the book
// Remove from DOM
bookDiv.remove();
// removing from array too
myLibrary = myLibrary.filter(book => book.uuid !== bookId);

}
}
});


Подробнее здесь: https://stackoverflow.com/questions/798 ... h-an-array