Arrays object 屬性未更新
[英]Arrays object property is not updating
問題描述
這是我在此的頭一篇博文。 請原諒我糟糕的代碼，我會盡力描述我的問題。
我正在從 Odin 項目構建一個圖書館應用程序。 目前，我能夠創建一個 object，其中包含我在彈出窗體中輸入的值。 已創建的 object 正按預期以正確的值顯示在屏幕上。
我的目標是在單擊按鈕時更新 myLibrary 數組中的讀取狀態。 我能夠通過單擊更新按鈕上的文本內容，不幸的是我不知道如何為創建的 object 更新數組中的讀取值。
我真的很感激任何建議。 感謝您的時間
let myLibrary = []; const registerBook = document.getElementById("registerBook"); const title = document.getElementById("title"); const author = document.getElementById("author"); const pages = document.getElementById("pages"); let read = document.getElementById("read-btn"); let form = document.getElementById("bookForm"); let optionYes = document.getElementById("option-yes"); let optionNo = document.getElementById("option-no"); function openForm() { document.getElementById("bookForm").style.display = "block"; } function closeForm() { document.getElementById("bookForm").style.display = "none"; } registerBook.addEventListener("click", function() { myLibrary.push({ title: title.value, author: author.value, pages: pages.value, read: read.value, }) renderBooks(); console.log(myLibrary); }) function renderBooks() { let bookShelf = document.querySelector('#bookShelf'); let bookCover = document.createElement('div'); bookCover.classList.add('bookCover'); bookShelf.appendChild(bookCover); let deleteCard = document.createElement('div'); deleteCard.classList.add('delete-card'); deleteCard.id = "deleteCard"; bookCover.append(deleteCard); let bookTitleTag = document.createElement('div'); bookTitleTag.classList.add('book-title-tag'); bookCover.append(bookTitleTag); bookTitleTag.textContent = 'Book title:'; let bookTitle = document.createElement('div'); bookTitle.classList.add('book-title'); bookCover.append(bookTitle); let bookAuthorTag = document.createElement('div'); bookAuthorTag.classList.add('book-author-tag'); bookCover.append(bookAuthorTag); bookAuthorTag.textContent = 'Book author:'; let bookAuthor = document.createElement('div'); bookAuthor.classList.add('book-author'); bookCover.append(bookAuthor); let bookPagesTag = document.createElement('div'); bookPagesTag.classList.add('book-pages-tag'); bookCover.append(bookPagesTag); bookPagesTag.textContent = 'No of pages:'; let bookPages = document.createElement('div'); bookPages.classList.add('book-pages'); bookCover.append(bookPages); let bookStatusTag = document.createElement('div'); bookStatusTag.classList.add('book-pages-tag'); bookCover.append(bookStatusTag); bookStatusTag.textContent = 'Have you read the book?:'; let bookStatus = document.createElement('button'); bookStatus.classList.add('book-status-btn'); bookStatus.id = 'book-status-btn'; bookCover.append(bookStatus); bookTitle.textContent = title.value; bookAuthor.textContent = author.value; bookPages.textContent = pages.value; bookStatus.textContent = read.value; /*Book status in card is updated */ bookStatus.addEventListener("click", () => { if (bookStatus.textContent === 'Yes') { bookStatus.textContent = 'No' } else { if (bookStatus.textContent === 'No') { bookStatus.textContent = 'Yes' } } }); /* Trying to update array */ bookStatus.addEventListener("click", () => { if (bookCover.read === 'Yes') { bookCover.read = 'No' } else { if (bookCover.read === 'No') { bookCover.read = 'Yes' } } console.log(myLibrary); }); deleteCard.addEventListener("click", () => { bookShelf.removeChild(bookCover); myLibrary.splice(bookCover, 1); }); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script defer src="index.js"></script> <title>Library</title> </head> <body> <div class="wrapper"> <div class="header"> <div class="logo">Library</div> <div class="buttons"> <div class="add-book-btn" id="addBookBtn" onclick="openForm()">Add Book</div> <.--<div class="login-btn">Log in</div> --> </div> </div> <div class="main"> <div class="form-popup" id="bookForm"> <form action="/action_page.php" onsubmit="event?preventDefault()" class="form-container"> <div class="form-popup-close" onclick="closeForm()"></div> <h1>Add Book</h1> <label for="title"><b>Book title</b></label> <input type="text" id="title" placeholder="Enter book title" name="title" required> <label for="author"><b>Author</b></label> <input type="text" id="author" placeholder="Enter author name" name="author"> <label for="pages"><b>No. of pages</b></label> <input type="number" id="pages" placeholder="Number of pages" name="pages"> <div class="form-bot"> <p>Have you read it?</p> <select name="read" id="read-btn"> <option id="option-yes" value="Yes">Yes</option> <option id="option-no" value="No">No</option> </select> </div> <button type="button" class="btn" id="registerBook" onclick="closeForm()">Register Book</button> </form> </div> <div id="bookShelf"></div> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 2022-12-29 20:46:11
您可以從bbookTitle DIV 中獲取標題，並在數組中搜索該標題。 然后您可以切換read屬性。
let myLibrary = []; const registerBook = document.getElementById("registerBook"); const title = document.getElementById("title"); const author = document.getElementById("author"); const pages = document.getElementById("pages"); let read = document.getElementById("read-btn"); let form = document.getElementById("bookForm"); let optionYes = document.getElementById("option-yes"); let optionNo = document.getElementById("option-no"); function openForm() { document.getElementById("bookForm").style.display = "block"; } function closeForm() { document.getElementById("bookForm").style.display = "none"; } registerBook.addEventListener("click", function() { myLibrary.push({ title: title.value, author: author.value, pages: pages.value, read: read.value, }) renderBooks(); console.log(myLibrary); }) function renderBooks() { let bookShelf = document.querySelector('#bookShelf'); let bookCover = document.createElement('div'); bookCover.classList.add('bookCover'); bookShelf.appendChild(bookCover); let deleteCard = document.createElement('div'); deleteCard.classList.add('delete-card'); deleteCard.id = "deleteCard"; bookCover.append(deleteCard); let bookTitleTag = document.createElement('div'); bookTitleTag.classList.add('book-title-tag'); bookCover.append(bookTitleTag); bookTitleTag.textContent = 'Book title:'; let bookTitle = document.createElement('div'); bookTitle.classList.add('book-title'); bookCover.append(bookTitle); let bookAuthorTag = document.createElement('div'); bookAuthorTag.classList.add('book-author-tag'); bookCover.append(bookAuthorTag); bookAuthorTag.textContent = 'Book author:'; let bookAuthor = document.createElement('div'); bookAuthor.classList.add('book-author'); bookCover.append(bookAuthor); let bookPagesTag = document.createElement('div'); bookPagesTag.classList.add('book-pages-tag'); bookCover.append(bookPagesTag); bookPagesTag.textContent = 'No of pages:'; let bookPages = document.createElement('div'); bookPages.classList.add('book-pages'); bookCover.append(bookPages); let bookStatusTag = document.createElement('div'); bookStatusTag.classList.add('book-pages-tag'); bookCover.append(bookStatusTag); bookStatusTag.textContent = 'Have you read the book?:'; let bookStatus = document.createElement('button'); bookStatus.classList.add('book-status-btn'); bookStatus.id = 'book-status-btn'; bookCover.append(bookStatus); bookTitle.textContent = title.value; bookAuthor.textContent = author.value; bookPages.textContent = pages.value; bookStatus.textContent = read.value; /*Book status in card is updated */ bookStatus.addEventListener("click", () => { if (bookStatus.textContent === 'Yes') { bookStatus.textContent = 'No' } else { if (bookStatus.textContent === 'No') { bookStatus.textContent = 'Yes' } } }); /* Trying to update array */ bookStatus.addEventListener("click", () => { let title = bookTitle.textContent; let book = myLibrary.find(book => book.title === title); if (book) { book.read = book.read === 'Yes'? 'No': 'Yes'; bookStatus.textContent = book.read; } console.log(myLibrary); }); deleteCard.addEventListener("click", () => { bookShelf.removeChild(bookCover); myLibrary.splice(bookCover, 1); }); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script defer src="index.js"></script> <title>Library</title> </head> <body> <div class="wrapper"> <div class="header"> <div class="logo">Library</div> <div class="buttons"> <div class="add-book-btn" id="addBookBtn" onclick="openForm()">Add Book</div> <.--<div class="login-btn">Log in</div> --> </div> </div> <div class="main"> <div class="form-popup" id="bookForm"> <form action="/action_page.php" onsubmit="event?preventDefault()" class="form-container"> <div class="form-popup-close" onclick="closeForm()"></div> <h1>Add Book</h1> <label for="title"><b>Book title</b></label> <input type="text" id="title" placeholder="Enter book title" name="title" required> <label for="author"><b>Author</b></label> <input type="text" id="author" placeholder="Enter author name" name="author"> <label for="pages"><b>No. of pages</b></label> <input type="number" id="pages" placeholder="Number of pages" name="pages"> <div class="form-bot"> <p>Have you read it?</p> <select name="read" id="read-btn"> <option id="option-yes" value="Yes">Yes</option> <option id="option-no" value="No">No</option> </select> </div> <button type="button" class="btn" id="registerBook" onclick="closeForm()">Register Book</button> </form> </div> <div id="bookShelf"></div> </div> </div> </body> </html>
Length屬性未在對象數組上更新
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.