The code is supposed to receive the value from input and then show it to each category shelf is it completed or incomplete. But the value keep showing undefined. Especially the "bookElement" wherever i console.log the variable it showing undefined
// {
// id: string | number,
// title: string,
// author: string,
// year: number,
// isComplete: boolean,
// }
const book = [];
const RENDER_SHELF = "render-shelf";
function generateID() {
return +new Date();
}
function generateBookObject(id, title, author, year, isComplete) {
return {
id,
title,
author,
year,
isComplete,
};
}
function addBook() {
const bookTitle = document.getElementById("inputBookTitle").value;
const bookAuthor = document.getElementById("inputBookAuthor").value;
const bookYear = document.getElementById("inputBookYear").value;
const bookStatus = document.getElementById("inputBookIsComplete").checked;
const bookID = generateID();
const bookObject = generateBookObject(
bookID,
bookTitle,
bookAuthor,
bookYear,
bookStatus
);
book.push(bookObject);
document.dispatchEvent(new Event(RENDER_SHELF));
}
function makeBookShelf(bookObject) {
const { id, title, author, year, isComplete } = bookObject;
const bookTitle = document.createElement("h3");
bookTitle.innerText = title;
const bookAuthor = document.createElement("p");
bookAuthor.innerText = "Penulis: " + author;
const bookYear = document.createElement("p");
bookYear.innerText = "Tahun: " + year;
const bookContainer = document.createElement("article");
bookContainer.classList.add("book_item");
bookContainer.append(bookTitle, bookAuthor, bookYear);
bookContainer.setAttribute("id", `book-${id}`);
}
document.addEventListener(RENDER_SHELF, function () {
const completedBook = document.getElementById("completeBookshelfList");
const incompleteBook = document.getElementById("incompleteBookshelfList");
completedBook.innerHTML = "";
incompleteBook.innerHTML = "";
for (const bookItem of book) {
const bookElement = makeBookShelf(bookItem);
console.log(bookElement);
if (bookItem.isComplete) {
completedBook.append(bookElement);
} else {
incompleteBook.append(bookElement);
}
}
});
document.addEventListener("DOMContentLoaded", function () {
const submitInput = document.getElementById("inputBook");
submitInput.addEventListener("submit", function (e) {
e.preventDefault();
addBook();
});
});<!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="style.css" />
</head>
<body>
<header class="head_bar">
<h1 class="head_bar__title">Bookshelf Apps</h1>
</header>
<main>
<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>
</main>
<script src="main.js"></script>
</body>
</html>What i want for this code is to receive value from title, author, year, and show it to the bookshelf to each category is it completed or uncompleted based on the checkbox
>Solution :
You forgot to add a return to the makeBookShelf() function.
function makeBookShelf(bookObject) {
...
const bookContainer = document.createElement("article");
bookContainer.classList.add("book_item");
bookContainer.append(bookTitle, bookAuthor, bookYear);
bookContainer.setAttribute("id", `book-${id}`);
return bookContainer; // Add this line
}