I'm trying to make an online library arrary that gets inputs for the value of a "book" object from a user form.
The problem is I made an if function to check if the currently submitted inputs match an already existing "book" object. Yet the function passes every input I make no matter if it's exactly the same.
Here is the Js
const submit = document.getElementById("submit");
const cardbox = document.getElementById("cardBox");
class Library {
constructor() {
this.books = [];
}
}
const myLibrary = new Library();
class Book {
constructor(title, author, pageCount, haveRead) {
this.title = title;
this.author = author;
this.pageCount = pageCount;
this.haveRead = haveRead;
}
}
function getBook() {
const book = new Book();
book.title = document.getElementById('title').value
book.author = document.getElementById('author').value
book.pageCount = document.getElementById('pageCount').value
book.haveRead = document.getElementById('haveRead').checked
function addBook() {
if (!myLibrary.books.includes(book)) {
myLibrary.books.push(book);
return makeCard(book);
}
else {
alert("Error: This book is already in library, pls reload and try again");
stop();
}
}
function makeCard() {
const card = document.createElement("div");
const titleCard = document.createElement("p");
const authorCard = document.createElement("p");
const pageCountCard = document.createElement("p");
titleCard.textContent = "Title: " + book.title;
authorCard.textContent = "Author: " + book.author;
pageCountCard.textContent = "Page Count: " + book.pageCount;
card.style.backgroundColor = "red";
card.style.fontSize = "20px"
cardbox.style.display = "flex"
card.appendChild(titleCard);
card.appendChild(authorCard);
card.appendChild(pageCountCard);
cardbox.appendChild(card);
return card;
}
addBook(book);
return book;
}
submit.addEventListener("click", function() {
getBook();
})<!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">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="entry">
<form action="#" method="post">
<label for="title">Book title:</label>
<input type="text" id="title" name="book title" placeholder="insert book title here"><br>
<label for="author">Author:</label>
<input type="text" id="author" name="book author" placeholder="insert book author here"><br>
<label for="pageCount">How many pages is it?</label>
<input type="text" id="pageCount" name="pageCount" placeholder="insert page count here"><br>
<label for="read">Have you read already?</label>
<input type="checkbox" id="haveRead" name="read" placeholder="insert read status here">
</form>
<button type="submit" id="submit">Submit</button>
<div id="cardBox"></div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>And there is the HTML for good measure. What am I missing here?
