按下按鈕后回圈遍歷物件陣列

我正在嘗試遍歷物件陣列，以根據庫專案的輸入值將它們顯示在網格上。我的回圈代碼是

const addBook = (ev) => {
    ev.preventDefault();
    let myLibrary = [];
    let bookInfo = {
      title: document.getElementById('title').value,
      author: document.getElementById('author').value,
      pages: document.getElementById('pages').value,
    }
    myLibrary.push(bookInfo)
    for (i = 0; i < myLibrary.length; i  ) {
      console.log(myLibrary)
      var container = document.getElementById('book-shelf')
      var div = document.createElement('div')
      div.classList.add('cell')
      container.appendChild(div);
    }
    var submitBtn = document.querySelector('.submit-btn');
    submitBtn.addEventListener('click', addBook)

每次我輸入標題、作者和頁面值并單擊提交按鈕時，它都會通過并給我一個單元格。如果嘗試添加另一本書，它會給我 3 個單元格而不是 2 個。再添加一個給我 6 個而不是 3 個。我怎樣才能做到每次都可以添加一本書而不是多次添加？

uj5u.com熱心網友回復：

主要有三個問題。

1. 在函式之后和按鈕偵聽器之前缺少花括號。

2. myLibrary每次呼叫函式時都會重新定義，這是您每次都必須查看資料的原因之一。您想在函式外定義它，以便在addBook呼叫時一次添加一本書。

3. 隨著myLibrary不再每次都重新定義了沒有必要的回圈。我們可以將這本書的 HTML 添加到書架上onSubmit。

（注：在此作業示例（我已經添加了一些HTML的表和輸入按鈕，并創建了一些代碼新書添加到貨架），我已經改名為myLibrary變數來bookShelf使事情一致HTML 命名。）

// Cache all the elements up front
const titleEl = document.getElementById('title');
const authorEl = document.getElementById('author');
const pagesEl = document.getElementById('pages');
const bookshelfEl = document.getElementById('bookshelf');
const submitBtn = document.querySelector('.submit-btn');

// Add the listener
submitBtn.addEventListener('click', addBook, false);

titleEl.focus();

// Our bookShelf variable is now
// outside the function
const bookShelf = [];

function addBook() {

  // Because we've cached the elements
  // we can now just grab the values from each
  const bookInfo = {
    title: titleEl.value,
    author: authorEl.value,
    pages: pagesEl.value,
  }

  bookShelf.push(bookInfo);

  // Once we've added our book we can grab the
  // title, author, and pages variables from it
  const { title, author, pages } = bookInfo;

  // Create a row for the table
  const row = document.createElement('tr')

  // Create some HTML and add it to the div
  row.innerHTML = `
     <td>${title}</td>
     <td>${author}</td>
     <td>${pages}</td>
  `;

  bookshelfEl.appendChild(row);

}

table { border-collapse: collapse; border: 2px solid #565656; width: 100%; }
td { text-align: center; }
.heading { background-color: #efefef; border-top: solid thin #565656; }
tr { border: solid thin #ababab; }

<input placeholder="Title" id="title" />
<input placeholder="Author" id="author" />
<input placeholder="Pages" id="pages" />
<button type="button" class="submit-btn">Submit</button>
<H3>Book shelf</H3>
<table>
  <tbody id="bookshelf">
    <tr class="heading">
      <td>Title</td>
      <td>Author</td>
      <td>Pages</td>
    </tr>
  </tbody>
</table>

附加檔案

• 解構賦值

• 模板/字串文字

uj5u.com熱心網友回復：

你的問題是回圈。每次單擊提交按鈕時，都會myLibrary為此塊中的每個專案添加一個單元格：

for (i = 0; i < myLibrary.length; i  ) {
      console.log(myLibrary)
      var container = document.getElementById('book-shelf')
      var div = document.createElement('div')
      div.classList.add('cell')
      container.appendChild(div);
    }

我認為您不需要每次都遍歷陣列。只需在將 bookInfo 資料添加到 時直接添加單元格myLibrary，而不使用for回圈，例如

const addBook = (ev) => {
    ev.preventDefault();
    let myLibrary = [];
    let bookInfo = {
      title: document.getElementById('title').value,
      author: document.getElementById('author').value,
      pages: document.getElementById('pages').value,
    }
    myLibrary.push(bookInfo)
    var container = document.getElementById('book-shelf')
    var div = document.createElement('div')
    div.classList.add('cell')
    container.appendChild(div);
}
var submitBtn = document.querySelector('.submit-btn');
submitBtn.addEventListener('click', addBook)

標籤：javascript html css

上一篇：將簡單陣列轉換為物件的二維陣列

下一篇：如何使用JSZip同步生成一個zip檔案？