Trying to pass input value as new object into an array

Question

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

const title = document.querySelector('#title').value; captures the value of title on page load - it does not change when an input is entered ... use const title = document.querySelector('#title'); instead, then title.value instead of title — Bravo
– Bravo, Commented Mar 1, 2022 at 2:20
Or just move the 4 first const inside the addBookToLibrary function. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 1, 2022 at 2:26

innocent · Accepted Answer · 2022-03-01 03:05:05Z

2

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

answered Mar 1, 2022 at 3:05

innocent

9658 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user15987286 Over a year ago

This doesn't seem to work either. What happens now is each time I enter something in the form I see a new object being made in the console as I type. But when I submit the form it's not console logging it or pushing anything into the array. I check after hitting submit and the array is still empty.

innocent Over a year ago

@CodeNoob91 This definitely works I have tested it out you must be making some mistake. Did you stop the form from refreshing onSubmit by using event.prevenDefault()

user15987286 Over a year ago

Yea I actually realized right after posting that comment that I hadn’t used preventDefault( ) lol. Thank you for the help!

Collectives™ on Stack Overflow

Trying to pass input value as new object into an array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related