Estoy trabajando en una aplicación de biblioteca simple con javascript. En este momento, estoy trabajando para obtener los valores de entrada del formulario para pasar a la matriz myLibrary con una función de constructor cuando envío el formulario. Me he topado con una pared ya que nada está pasando a la matriz y no estoy seguro de si mi formulario no se está enviando o si algo más está desactivado. Si alguien pudiera darme una idea de dónde podría estar yendo mal, sería increíble.
<!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>principal.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); }En la etiqueta del script, obtiene el valor tan pronto como se carga la página y no en el momento del envío del formulario. Obtenga el valor dentro en el momento en que se carga el formulario y podrá ver el valor. Entonces, haga los siguientes cambios al comienzo del archivo JS
const title = document.querySelector('#title'); const author = document.querySelector('#author'); const pages = document.querySelector('#pages'); const isRead = document.querySelector('#isRead');y dentro de la función
function addBookToLibrary() { const newBook = new Book(title.value, author.value, pages.value, isRead.value); myLibrary.push(newBook); }Puede verificar el valor que se agrega a myLibrary al cerrar sesión en la consola en la función al final.
console.log(myLibrary);