javascript - 当我添加新书时它没有添加？

问题描述

这是一个简单的 java 脚本应用程序，它应该添加一个“新书”按钮，该按钮会弹出一个表单，允许用户输入新书的详细信息：作者、标题、图像链接。当他们提交此表单时，它应该将书籍添加到数组中并将其呈现到页面上。

我的问题是，当单击添加书按钮并插入书时它不起作用，尽管我确保它在我插入它时添加到数组中但它没有呈现！我应该怎么做才能正常工作？

let books = [{
    title: "Arbaoon",
    author: "Ahmad Shugairi",
    image: ""
  },
  {
    title: "harry potter",
    author: "J.K. Rowling",
    image: ""
  },
  {
    title: "the origin",
    author: "Dan Brown",
    image: ""
  },
  {
    title: "central park",
    author: "Guillaume Musso",
    image: "https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&w=1000&q=80"
  },
  {
    title: "1984",
    author: "George Orwell",
    image: "https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg"
  },
  {
    title: "book1",
    author: "John Doe",
    image: "https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg"
  }
];

function render() {

  const container = document.getElementById('container');
  const firstRow = document.createElement('div');
  const secondRow = document.createElement('div');
  const thirdRow = document.createElement('div');

  firstRow.classList.add('first_shelf');
  secondRow.classList.add('second_shelf');
  thirdRow.classList.add('third_shelf');

  container.appendChild(firstRow);
  container.appendChild(secondRow);
  container.appendChild(thirdRow);

  var images = [];
  var newArr = [];
  books.forEach((el, i) => {
    const imageContainer = document.createElement('div');
    const book = document.createElement('div');
    imageContainer.classList.add('imageContainer');

    book.classList.add(`book_${i}`);
    book.textContent = `${books[i].title} 
        by ${books[i].author}`
    const image = document.createElement('img');
    image.setAttribute('src', books[i].image);
    image.classList.add(`image_${i}`);
    imageContainer.appendChild(image);
    book.appendChild(imageContainer);

    newArr.push(book)

  });
  newArr.forEach((el, i) => {
    if (i <= 2) {
      firstRow.appendChild(el)
    } else if (i <= 5) {
      secondRow.appendChild(el)
    } else {
      thirdRow.appendChild(el)
    }
  });
}

function addNewBook() {

  const addBookButton = document.getElementById('addbook_btn');
  const submitButton = document.getElementById('submit_btn')
  addBookButton.addEventListener('click', () => {
    const form = document.getElementById('form');
    form.style.display = "block"
  });

  submitButton.addEventListener('click', (e) => {
    e.preventDefault();
    form.style.display = "none";
    const bookTitleVal = document.getElementById('book_title').value;
    const autherVal = document.getElementById('auther').value;
    const imageLinkVal = document.getElementById('image_link').value;

    books.push({
      title: bookTitleVal,
      author: autherVal,
      mage: imageLinkVal
    });
  });
  render();
}
addNewBook();

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  height: 100vh;
}

.first_shelf {
  height: 20%;
  display: flex;
  justify-content: center;
  background-color: aqua;
}

.second_shelf {
  height: 25%;
  background-color: red;
}

.third_shelf {
  height: 25%;
  background-color: seagreen;
}

.first_shelf,
.second_shelf,
.third_shelf {
  height: 30%;
  display: flex;
  justify-content: center;
}

.first_shelf>div,
.second_shelf>div,
.third_shelf>div {
  background-color: #f1f1f1;
  width: 180px;
  height: 140px;
  margin: 20px;
  text-align: center;
}

.imageContainer {
  background-color: chocolate;
  height: 90px;
  width: 90px;
  margin: auto;
  margin-top: 10px;
}

.imageContainer>img {
  height: 90px;
  width: 100px
}

button {
  height: 50px;
  border: none;
  border-radius: 3px;
  background-color: crimson;
}

#form {
  display: none;
  background-color: darkgoldenrod;
  height: 160px;
  width: 250px;
  margin: auto;
}

<body>
  <button id="addbook_btn">ADD BOOK</button>
  <form id="form">
    <label>book title</label>
    <input id="book_title">
    <label>auther</label>
    <input id="auther">
    <label>image link</label>
    <input id="image_link">
    <button type="submit" id="submit_btn"> submit </button>
  </form>
  <div id="container"></div>

</body>

标签： javascript

javascript - 当我添加新书时它没有添加？

问题描述

解决方案

推荐阅读