Я хочу добавить книги в библиотеку. После ввода информации для ввода и отправки массив книг остается пустым. Я выложу фотографии, чтобы вы могли лучше понять. Также извините за грязный код. Я уберу ...

-1
Henri 13 Дек 2020 в 13:17

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.log here to see the result immediately,
  // otherwise there may not be any result yet
  console.log(`Added:\n${format(book)}`);
}

document.addEventListener("click", evt => {
  if (evt.target.id === "addbook") {
    submitBook();
  } else if (evt.target.id === "showbooks") {
    console.clear();
    console.log(`${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>
0
KooiInc 15 Дек 2020 в 08:26