I'm working on a simple library app with javascript. Right now I'm working on getting the input values of the form to pass into the myLibrary array with a constructor function when I submit the form. I've hit a wall as nothing is passing into the array and I'm unsure if my form isn't submitting or if something else is off. If anyone could give me an idea of where I might be going wrong that would awesome.
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Virtual Library</title>
</head>
<body>
<header>
<h1>My Virtual Library</h1>
</header>
<div class="btn-container">
<button class="add-book-btn">+ Add Book</button>
</div>
<div class="modal-overlay">
<form id="form" class="modal">
<h2>Add new book</h2>
<input id="title" type="text" placeholder="Title" required>
<input id="author" type="text" placeholder="Author" required>
<input id="pages" type="number" placeholder="Pages" required>
<div class="check-container">
<label>Have you read it?</label>
<input id="isRead" class="checkbox" type="checkbox">
</div>
<input class="submit" type="submit">
</form>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
const title = document.querySelector('#title').value;
const author = document.querySelector('#author').value;
const pages = document.querySelector('#pages').value;
const isRead = document.querySelector('#isRead').value;
const form = document.querySelector('#form');
form.addEventListener('submit', addBookToLibrary);
const addBookBtn = document.querySelector('.add-book-btn');
const modalOverlay = document.querySelector('.modal-overlay');
addBookBtn.addEventListener('click', function() {
modalOverlay.classList.add('overlay-active');
});
let myLibrary = [
];
function Book(title, author, pages, isRead) {
this.title = title;
this.author = author;
this.pages = pages;
this.isRead = false;
}
function addBookToLibrary() {
const newBook = new Book(title, author, pages, isRead);
myLibrary.push(newBook);
}
On the script tag, you are fetching the value as soon as the page loads and not at the time of the form submitting. Fetch the value inside at the time form loads and you will be able to see the value. So, do the following changes at the starting of the JS file
const title = document.querySelector('#title');
const author = document.querySelector('#author');
const pages = document.querySelector('#pages');
const isRead = document.querySelector('#isRead');
and inside the function
function addBookToLibrary() {
const newBook = new Book(title.value, author.value, pages.value, isRead.value);
myLibrary.push(newBook);
}
You can check the value getting added into the myLibrary by console logging it out in the function at the end.
console.log(myLibrary);