小贝子编程

它总是移动到不同的section id



所以我刚刚做了我的第一个项目，我现在面临一个问题所以当我按下按钮时它应该是" belum selesai dibaca "或者id="incompleteBookshelfList"但它总是显示在'Selesai dibaca'或id="completeBookshelfList"有人知道我该怎么做吗?因为我已经修修补补了几天了，还没有找到正确的方法。

这是存储库https://gitfront.io/r/user-2883908/RJRPjrov1UfT/Front-end-submission/

我认为我所面临的问题是在javascript文件中的makeBook函数，但我仍然不知道正确的方法来解决它

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bookshelf Apps</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, input, button {
font-family: 'Open Sans', sans-serif;
}
.head_bar {
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
background-color: cornflowerblue;
color: white;
}
main {
max-width: 800px;
width: 80%;
margin: 0 auto;
padding: 16px;
}
.input_section {
display: flex;
flex-direction: column;
padding: 16px;
border: 1px solid black;
border-radius: 10px;
}
.input_section > h2 {
text-align: center;
color: cornflowerblue;
}
.input_section > form > .input {
margin: 8px 0;
}
.input_section > form > button {
background-color: cornflowerblue;
color: white;
border: 0;
border-radius: 5px;
display: block;
width: 100%;
padding: 8px;
cursor: pointer;
}
.input_section > form > button > span {
font-weight: bold;
}
.input_section > form > .input > input {
display: block;
width: 100%;
padding: 8px;
border-radius: 5px;
}

.input_section > form > .input > label {
color: cornflowerblue;
font-weight: bold;
}
.input_section > form > .input_inline {
margin: 12px 0;
display: flex;
align-items: center;
}
.input_section > form > .input_inline > label {
color: cornflowerblue;
font-weight: bold;
margin-right: 10px;
}
.search_section {
margin: 16px 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
border: 1px solid black;
border-radius: 10px;
}
.search_section > h2 {
color: cornflowerblue;
}
.search_section > form {
padding: 16px;
width: 100%;
display: grid;
grid-template-columns: auto 1fr 0.5fr;
grid-gap: 10px;
}
.search_section > form > label {
display: flex;
align-items: center;
}
.search_section > form > input {
padding: 5px;
border-radius: 5px;
}
.search_section > form > button {
background-color: cornflowerblue;
color: white;
border: 0;
border-radius: 5px;
cursor: pointer;
}
.book_shelf {
margin: 16px 0 0 0;
border: 1px solid black;
padding: 16px;
border-radius: 10px;
}
.book_shelf > h2 {
color: cornflowerblue;
}
.book_shelf > .book_list {
padding: 16px;
}
.book_shelf > .book_list > .book_item {
padding: 8px 16px 16px 16px;
border: 1px solid black;
border-radius: 5px;
margin: 10px 0;
}
.book_shelf > .book_list > .book_item > h3, p {
margin: 8px 0;
}
.book_shelf > .book_list > .book_item > .action > button {
border: 0;
padding: 5px;
margin: 0 5px 0 0;
border-radius: 5px;
cursor: pointer;
}
.book_shelf > .book_list > .book_item > .action > .green {
background-color: darkgreen;
color: white;
}
.book_shelf > .book_list > .book_item > .action > .red {
background-color: darkred;
color: white;
}
.check-button {
width: 40px;
height: 40px;
background: url('../assets/check-outline.svg');
background-size: contain;
margin-left: auto;
cursor: pointer;
border: none;
}
.check-button:hover {
background: url('../assets/check-solid.svg');
background-size: contain;
}
.trash-button {
width: 40px;
height: 40px;
background: url('../assets/trash-outline.svg');
background-size: contain;
margin-left: 16px;
cursor: pointer;
border: none;
}
.trash-button:hover {
background: url('../assets/trash-fill.svg');
background-size: contain;
}
.undo-button {
width: 40px;
height: 40px;
background: url('../assets/undo-ouline.svg');
background-size: contain;
margin-left: auto;
cursor: pointer;
border: none;
}
.undo-button:hover {
background: url('../assets/undo-ouline.svg');
background-size: contain;
}
.check-button:focus, .trash-button {
outline: none;
}

@media only screen and (max-width: 1024px) {
.wrapper {
margin: 0;
}
.wrapper .container {
width: 100%;
}
.list-item {
width: 90%;
}
.form {
width: 100%;
}
}
</style>
</head>
<body>
<header class="head_bar">
<div class="container">
<h1 class="head_bar__title">Bookshelf Apps</h1>
</div>
</header>
<main>
<div class="container">
<section class="input_section">
<h2>Masukkan Buku Baru</h2>
<form id="inputBook">
<div class="input">
<label for="inputBookTitle">Judul</label>
<input id="inputBookTitle" type="text" required>
</div>
<div class="input">
<label for="inputBookAuthor">Penulis</label>
<input id="inputBookAuthor" type="text" required>
</div>
<div class="input">
<label for="inputBookYear">Tahun</label>
<input id="inputBookYear" type="number" required>
</div>
<div class="input_inline">
<label for="inputBookIsComplete">Selesai dibaca</label>
<input id="inputBookIsComplete" type="checkbox">
</div>
<button id="bookSubmit" type="submit">Masukkan Buku ke rak <span>Belum selesai dibaca</span></button>
</form>
</section>

<section class="search_section">
<h2>Cari Buku (Opsional)</h2>
<form id="searchBook">
<label for="searchBookTitle">Judul</label>
<input id="searchBookTitle" type="text">
<button id="searchSubmit" type="submit">Cari</button>
</form>
</section>

<section class="book_shelf">
<h2>Belum selesai dibaca</h2>

<div id="incompleteBookshelfList" class="book_list">
<!--      <article class="book_item">-->
<!--        <h3>Book Title</h3>-->
<!--        <p>Penulis: John Doe</p>-->
<!--        <p>Tahun: 2002</p>-->
<!--    -->
<!--        <div class="action">-->
<!--          <button class="green">Selesai dibaca</button>-->
<!--          <button class="red">Hapus buku</button>-->
<!--        </div>-->
<!--      </article>-->
</div>
</section>

<section class="book_shelf">
<h2>Selesai dibaca</h2>

<div id="completeBookshelfList" class="book_list">
<!--      <article class="book_item">-->
<!--        <h3>Book Title</h3>-->
<!--        <p>Penulis: John Doe</p>-->
<!--        <p>Tahun: 2002</p>-->
<!--        -->
<!--        <div class="action">-->
<!--          <button class="green">Belum selesai di Baca</button>-->
<!--          <button class="red">Hapus buku</button>-->
<!--        </div>-->
<!--      </article>-->
</div>
</section>
</div>
</main>

<script>
const books = [];
const RENDER_EVENT = 'render-book';

document.addEventListener(RENDER_EVENT, function () {
const uncompletedBOOKList = document.getElementById('incompleteBookshelfList');
uncompletedBOOKList.innerHTML = '';

const completedBOOKList = document.getElementById('completeBookshelfList');
completedBOOKList.innerHTML = '';

for (const bookItem of books) {
const bookElement = makeBook(bookItem);
if (!bookItem.isCompleted)
uncompletedBOOKList.append(bookElement);
else
completedBOOKList.append(bookElement);
}
});
function generateId() {
return +new Date();
}
function generateBookObject(id, title, author, year, isCompleted) {
return {
id,
title,
author,
year,
isCompleted
}
}
function clearForm() {
const bookTitle = document.getElementById("inputBookTitle");
const bookAuthor = document.getElementById("inputBookAuthor");
const bookYear = document.getElementById("inputBookYear");
const isCompleted = document.getElementById("inputBookIsComplete");
bookTitle.value = "";
bookAuthor.value = "";
bookAuthor.value = "";
bookYear.value = "";
isCompleted.value = false;
}
function addBook() {
const bookTitle = document.getElementById('inputBookTitle').value;
const bookAuthor= document.getElementById('inputBookAuthor').value;
const bookYear = document.getElementById('inputBookYear').value;
const IsCompleted = document.getElementById('inputBookIsComplete').value;
const generatedID = generateId();
const bookObject = generateBookObject(
generatedID,
bookTitle,
bookAuthor,
bookYear, 
IsCompleted);
books.push(bookObject);

document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}
document.addEventListener('DOMContentLoaded', function () {
const submitForm = document.getElementById('inputBook');
submitForm.addEventListener('submit', function (event) {
event.preventDefault();
addBook();
clearForm();
});
if (isStorageExist()) {
loadDataFromStorage();
}
});
function makeBook(bookObject) {
const textTitle = document.createElement('h2');
textTitle.innerText = bookObject.title;

const textAuthor = document.createElement('p');
textAuthor.innerText = bookObject.author;
const textYear = document.createElement('p');
textYear.innerText = bookObject.year;

const textContainer = document.createElement('div');
textContainer.classList.add('book_item');
textContainer.append(textTitle, textAuthor, textYear);
const container = document.createElement('div');
container.classList.add('item', 'shadow');
container.append(textContainer);
container.setAttribute('id', `book-${bookObject.id}`);


if (bookObject.isCompleted) {
const undoButton = document.createElement('button');
undoButton.classList.add('undo-button');

undoButton.addEventListener('click', function () {
undoBookFromCompleted(bookObject.id);
});

const trashButton = document.createElement('button');
trashButton.classList.add('trash-button');

trashButton.addEventListener('click', function () {
removeBookFromCompleted(bookObject.id);
});

container.append(undoButton, trashButton);
} else {
const checkButton = document.createElement('button');
checkButton.classList.add('check-button');

checkButton.addEventListener('click', function () {
addBookToCompleted(bookObject.id);
});

container.append(checkButton);
}
return container;
}



function addBookToCompleted (bookId) {
const bookTarget = findBook(bookId);

if (bookTarget == null) return;

bookTarget.isCompleted = true;
document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}
function findBook(bookId) {
for (const bookItem of books) {
if (bookItem.id === bookId) {
return bookItem;
}
}
return null;
}

function removeBookFromCompleted(bookId) {
const bookTarget = findBookIndex(bookId);

if (bookTarget === -1) return;

books.splice(bookTarget, 1);
document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}


function undoBookFromCompleted(bookId) {
const bookTarget = findBook(bookId);

if (bookTarget == null) return;

bookTarget.isCompleted = false;
document.dispatchEvent(new Event(RENDER_EVENT));
saveData();
}
function findBookIndex(bookId) {
for (const index in books) {
if (books[index].id === bookId) {
return index;
}
}

return -1;
}
function saveData() {
if (isStorageExist()) {
const parsed = JSON.stringify(books);
localStorage.setItem(STORAGE_KEY, parsed);
document.dispatchEvent(new Event(SAVED_EVENT));
}
}
const SAVED_EVENT = 'books';
const STORAGE_KEY = 'BOOK_APPS';

function isStorageExist(){
if (typeof (Storage) === undefined) {
alert('Browser kamu tidak mendukung local storage');
return false;
}
return true;
}
document.addEventListener(SAVED_EVENT, function () {
console.log(localStorage.getItem(STORAGE_KEY));
});

function loadDataFromStorage() {
const serializedData = localStorage.getItem(STORAGE_KEY);
let data = JSON.parse(serializedData);

if (data !== null) {
for (const book of data) {
books.push(book);
}
}

document.dispatchEvent(new Event(RENDER_EVENT));

document.addEventListener(SAVED_EVENT, function () {
console.log(localStorage.getItem(STORAGE_KEY));
})
}
</script>

</body>
</html>

这是完整的代码片段

问题是您的IsCompleted值没有变化，并且您已将其定义为常量，这意味着它不会改变。有一些事情你可以做，它会运行良好，用var初始化这些变量

var bookTitle, bookAuthor, bookYear, IsCompleted;

并更改这一行，您也可以在函数中这样做。thisconst IsCompleted = document.getElementById('inputBookIsComplete').value;

tovar IsCompleted = document.getElementById('inputBookIsComplete').checked;

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium