我似乎无法在我的图书馆应用程序上使用切换开关

Question

我一直在尝试完成我的图书馆申请。 我忘了添加一个阅读按钮。 现在我正在尝试添加一个开关切换。 我已将它添加到弹出表单以及 DOM 中的 row.innerHTML 中。

我已将该值设置为“是”，但是当我在弹出表单上切换它时，它实际上不起作用。 当我将表单提交为“标记为已读”时，它仍将其添加为“未选中”。 我该如何解决这个错误？

 // ############ Selectors ############ //Add a book form pop up const newBtn = document.querySelector('#newBtn'); //add the new book to the library const addBtn = document.querySelector('#addBtn'); // close span const closeSpan = document.querySelector('.close'); // display the new book const display = document.querySelector('.display-lib'); //############ Listeners ############ // pop up the modal newBtn.addEventListener('click', function () { document.getElementById("popUp").style.display = "block"; }) // closes the form closeSpan.addEventListener('click', function () { popUp.style.display = "none"; }) // closes the form when you click anywhere on the window window.addEventListener('click', function (e) { if (e.target == popUp) { popUp.style.display = "none"; } }) class Book { constructor(title, author, pages, notes, read) { this.title = title; this.author = author; this.pages = pages; this.notes = notes; this.read = read; } } let myLibrary = []; class UI { displayBook() { //storing the books for (let i = 0; i < myLibrary.length; i++) { addBookToLibrary(myLibrary[i]); } } addBookToLibrary(book) { const shelf = document.querySelector('#book-list'); const row = document.createElement('th'); row.innerHTML = ` <div class="book"> <div class="title">Title: ${book.title}</div> <p class="author">Author: ${book.author}</p> <p class="pages">Pages: ${book.pages}</p> <p class="pages">Notes: ${book.notes}</p> <span class="read_toggle_label">Mark as read:</span> <label class="switch"> <input type="checkbox" value="yes" id='read' name='read'> <span class="slider round"></span> </label> <a href="#" class="delete"></a> </div> `; if (book.read) { row.querySelector('#read').checked = true; } //delete the book const dlt = row.querySelector('.delete'); dlt.addEventListener('click', function (e) { //first get the UI const ui = new UI(); ui.deleteBook(e.target); ui.showAlertDelete('book removed', 'success'); }) shelf.appendChild(row); } clearFields() { document.querySelector('#title').value = ''; document.querySelector('#author').value = ''; document.querySelector('#pages').value = ''; document.querySelector('#notes').value = ''; } deleteBook(target) { if (target.className === 'delete') { target.parentElement.remove(); } } // the alert prototoype function showAlert(message, className) { const div = document.createElement('div'); div.className = `alert ${className}`; div.appendChild(document.createTextNode(message)); const form = document.querySelector('#form'); form.appendChild(div); setTimeout(function () { document.querySelector('.alert').remove(); }, 3000); } showAlertDelete(message, className) { const div = document.createElement('div'); div.className = `alert ${className}`; div.appendChild(document.createTextNode(message)); const form = document.querySelector('.content'); form.appendChild(div); setTimeout(function () { document.querySelector('.alert').remove(); }, 3000); } } addBtn.addEventListener('click', (e) => { const title = document.querySelector('#title').value, author = document.querySelector('#author').value, pages = document.querySelector('#pages').value, notes = document.querySelector('#notes').value, read = document.querySelector('#read').checked; const ui = new UI(); if (title === '' || author === '' || pages === '' || notes === '') { ui.showAlert('Fill in the all the fields', 'error'); } else { const newBook = new Book(title, author, pages, notes, read); ui.addBookToLibrary(newBook); myLibrary.push(newBook); //function to clear input after submitted ui.clearFields(); } e.preventDefault(); });

 h1 { display: flex; justify-content: center; }.title { display: flex; justify-content: center; padding-top: 4rem; } p { display: flex; justify-content: center; padding-top: 1rem; } body { background-color: #41b3a3; height: 100vh; }.success, .error { color: white; padding: 5px; }.error { background: rgb(190, 0, 0); }.success { background: green; margin: auto; } /* Modal popup box https://www.w3schools.com/howto/howto_css_modals.asp */ /* The Modal (background) */ input#title { height: 30px; width: 200px; font-size: 20px; } input#author { height: 30px; width: 200px; font-size: 20px; } input#pages { height: 30px; width: 200px; font-size: 20px; margin-bottom: 20px; } input[type=checkbox] { transform: scale(2); } #popUp { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ font-size: 30px; } /* Modal Content/Box */ #form { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 20%; /* Could be more or less, depending on screen size */ } /* The Close Button */.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }.mark_as_read { display: inline-block; vertical-align: middle; justify-content: center; } /* The switch - the box around the slider */.switch { position: relative; display: inline-block; vertical-align: middle; justify-content: center; margin: auto; width: 60px; height: 34px; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: #41b3a3; } input:focus+.slider { box-shadow: 0 0 1px #2196F3; } input:checked+.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; } #switch_container { display: flex; justify-content: center; } /* Styles for the added book */.book { display: flex; flex-direction: column; align-items: center; padding: 15px; margin: 20px; background-color: #56c49e; }.title { font-size: 30px; font-weight: bold; margin-bottom: 20px; }.author { font-size: 30px; margin-bottom: 20px; }.pages { font-size: 25px; margin-bottom: 20px; }

 <:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min,css"> <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"> <title>Library</title> </head> <body> <div class="content"> <h1 class="title">A Book Library</h1> <p>A library project where you can store your books; coded for the Odin Project</p> <div id="addBtn_container" class="has-text-centered"> <a id="newBtn" class="button is-primary is-inverted">Add a New Book</a> </div> <div id="popUp"> <form id='form'> <span class="close">&times:</span> <ledgend>New Book</ledgend> <div id='textInput'> <p><input type='text' id='title' name='title' placeholder='Title'></p> <p><input type='text' id='author' name='author' placeholder='Author'></p> <p><input type='text' id='pages' name='pages' placeholder='Pages'></p> </div> <div class="field"> <label class="label">Additional Notes</label> <div class="control"> <textarea id='notes' class="textarea" placeholder="Notes"></textarea> </div> </div> <div id="switch_container"> <span class="mark_as_read">Mark as read. </span> <label class="switch"> <input type="checkbox" value="yes" id='read' name='read'> <span class="slider round"></span> </label> <button class="button is-success is-rounded is-pulled-right" type='submit' form='form' id='addBtn'>Add</button> </div> </form> </div> </div> <h1>MY BOOKS</h1> <div class="display-lib"> <table> <tbody id="book-list"> </tbody> </table> </div> </tbody> <script src="app.js"></script> </body> </html>

Answer 1

首先，您在book object 中错误地保存了复选框 state，它应该是： read = document.querySelector('#read').checked (no value key)

最后，您没有任何东西可以处理addBookToLibrary()中 object book的read数据。

只需在row.innerHTML之后添加：

if (book.read)
  row.querySelector('#read').checked = true;

PS 为了获得更好的性能，您应该尽可能使用getElementById()而不是querySelector() 。