Элементы не отображаются в массиве после нажатия
Я хочу добавить книги в библиотеку. После ввода информации для ввода и отправки массив книг остается пустым. Я выложу фотографии, чтобы вы могли лучше понять. Также извините за грязный код. Я уберу после того, как заставлю его работать. console.info после добавления книги
const books = [];
const submitBook = () => {
const bookName = document.querySelector('#title').value;
const bookAuthor = document.querySelector('#author').value;
const bookYear = document.querySelector('#year').value;
// let book = new Book(bookName.value, bookAuthor.value, bookYear.value);
books.push({
'name':bookName,
'author':bookAuthor,
'year':bookYear
});
alert("Book added.");
}<label for = "title">Title:</label><br>
<input type = "text" id = "title" name = "title" required><br>
<label for = "author">Author:</label><br>
<input type = "text" id = "author" name = "author" required><br>
<label for = "year">Year:</label><br>
<input type = "number" id = "year" name = "year" required><br>
<button onclick = "submitBook()">Add book</button>Код в вашем вопросе не воспроизводит описанную вами проблему. Пожалуйста, измените его соответствующим образом. Также причина скорее всего в этом: stackoverflow.com/questions/23667086/… (или ваша переменная локальна для функции и вы пытаетесь логировать ее снаружи)
@MichaelBeeson Вы правы, на самом деле в коде нет ничего плохого. Просто когда я нажимаю кнопку отправки, в консоли появляется что-то и сразу же исчезает, а массив остается пустым. Он сбрасывает массив книг каждый раз, когда я отправляю книгу. У меня есть пример страницы, с которой я записываю код. Наши коды в основном идентичны, и другие страницы работают нормально, вся информация остается в массиве. Это странно
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш код, кажется, работает. Я взял на себя смелость несколько упростить вам код. Как правило, не очень хорошая идея использовать встроенную обработку событий (onclick=... внутри html), поэтому обработчик перемещен в раздел кода. Также добавлена кнопка для отображения добавленных книг.
let books = [];
let to = null;
const clearAfter = (delay = 2) => setTimeout(() => console.clear(), delay * 1000);
const format = obj => JSON.stringify(obj).split("},{").join("},\n{");
const submitBook = () => {
let book = {};
document.querySelectorAll("input")
.forEach(inp => book[inp.name] = inp.value);
books.push(book);
console.clear();
// console.info here to see the result immediately,
// otherwise there may not be any result yet
console.info(`Added:\n${format(book)}`);
}
document.addEventListener("click", evt => {
if (evt.target.id === "addbook") {
submitBook();
} else if (evt.target.id === "showbooks") {
console.clear();
console.info(`${books.length || "No"} added books\n${
books.length < 1 ? "-" : format(books)}`);
}
// remove the log (to make buttons visible again in the SO-run window)
clearTimeout(to);
to = clearAfter();
});<label for = "title">Title:</label><br>
<input type = "text" id = "title" name = "title" required><br>
<label for = "author">Author:</label><br>
<input type = "text" id = "author" name = "author" required><br>
<label for = "year">Year:</label><br>
<input type = "number" id = "year" name = "year" required><br>
<p>
<button id = "addbook">Add book</button>
<button id = "showbooks">Show books added</button>
</p>Почему бы вам просто не добавитьEventListener к элементу с идентификатором addbook вместо того, чтобы прослушивать весь документ, а затем каждый раз проверять оператор if? Document.getElementById(‘addbook’).addEventListener(‘click’, submitBook)
Это называется делегирование события, и оно более универсально, если вам нужно больше обработчиков.
Ладно, чувак, ты крут. Благодарю вас за ваше усилие. Почему вы поместили кнопки в <p>? Ваше здоровье
Рад, что смог помочь ). <p> для некоторого дополнительного пробела (чтобы кнопки не приклеивались к последнему полю ввода).
Но ваш код работает! Просто попробуйте заменить
alert("Book added.")наconsole.info(books), и вы увидите, что массив добавляется.