Он всегда перемещался в другой идентификатор раздела ⇐ CSS

[Anonymous]

Я только что создал свой первый проект, и у меня возникла проблема, с которой я столкнулся прямо сейчас.
Когда я нажимаю кнопку, он должен перейти к «belum selesai dibaca» или id="incompleteBookshelfList",
но он всегда отображается в «Selesai dibaca» или id="completeBookshelfList".
Кто-нибудь знает, что мне делать, потому что я возился с ним несколько дней и еще не нашел правильный путь.
Это репозиторий
https://gitfront.io/r/user-2883908/RJRP ... ubmission/
Я думаю, что проблема, с которой я столкнулся, заключается в файлах JavaScript в функции makeBook, но я до сих пор не знаю правильного способа ее решения.

Код: Выделить всё

Bookshelf Apps




* {
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%;
}
}






Bookshelf Apps





Masukkan Buku Baru


Judul


Penulis


Tahun


Selesai dibaca


Masukkan Buku ke rak Belum selesai dibaca




Cari Buku (Opsional)

Judul

Cari




Belum selesai dibaca















Selesai dibaca

















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));
})
}

это полный фрагмент

Подробнее здесь: https://stackoverflow.com/questions/729 ... section-id