按下提交按鈕時，陣列的新值保持在同一張卡片上-有解無憂

所以基本上，每次用戶輸入他/她的資訊時，保存的值都會轉到 myLibrary 陣列。并且該資訊將顯示在卡片上。

提交表單一次按預期作業，但是當我再次使用它時，所有值都保留在第一張卡上。并且不會轉到新創建的卡。

圖片
1 圖片2

let myLibrary = [];

function Book(book, author, pages) {
  this.book = book;
  this.author = author;
  this.pages = pages;
}

function addBookToLibrary() {
  books = new Book(document.getElementById('book').value, document.getElementById('author').value, document.getElementById('pages').value)
  myLibrary.push(books);
}



bookinfo = document.getElementById('book').value
authorinfo = document.getElementById('author').value
pages = document.getElementById('pages').value
submit = document.getElementById('submit');
rightSide = document.getElementById('rightSide')



submit.addEventListener('click', e => {
  if (document.getElementById('book').value === '' || document.getElementById('author').value === '' ||
    document.getElementById('pages').value === '') {
    alert('add more information')
  } else {
    addBookToLibrary()
    addcard()
    document.getElementById('book').value = ''
    document.getElementById('author').value = ''
    document.getElementById('pages').value = ''

  }


})

function addcard() {


  // making a new div class for cards
  const newcard = document.createElement('div')

  // giving the new class attributs from my css style
  newcard.setAttribute('class', 'div')

  // adding the newly created div to parent element
  document.getElementById('rightSide').appendChild(newcard)

  //  form infomation into the cards h1's
  newcard.setAttribute('id', 'cardDetails');
  const bookTitle = document.createElement('h1')
  bookTitle.setAttribute('class', 'h1Style')
  const authorTitle = document.createElement('h1')
  authorTitle.setAttribute('class', 'h1Style')
  const pagesTitle = document.createElement('h1')
  pagesTitle.setAttribute('class', 'h1Style')

  // info from myLibrary array to created h1's
  for (i = 0; i < myLibrary.length; i  ) {
    bookTitle.innerHTML = `Book: ${myLibrary[i].book}`
    authorTitle.innerHTML = `Author: ${myLibrary[i].author} `
    pagesTitle.innerHTML = `${myLibrary[i].pages} pages`
  }



  // adding the h1's to the created div "cardDetails" with the value from my library
  document.getElementById('cardDetails').appendChild(bookTitle)
  document.getElementById('cardDetails').appendChild(authorTitle)
  document.getElementById('cardDetails').appendChild(pagesTitle)


}

<!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">
  <title>Library</title>
  <link rel="stylesheet" href="./Resource/style.css">
</head>

<body>

  <section class="grid">
    <div class="leftSide">
      <form class="form">
        <h1> Book Library</h1>

        <label for="book">Book</label>
        <input type="text" id="book" name="book">

        <label for="author">Author</label>
        <input type="text" id="author" name="author">

        <label for="pages">Pages</label>
        <input type="text" id="pages" name="pages">

        <button type='button' class="submit" id="submit">submit</button>

      </form>

    </div>

    <div id="rightSide" class="rightSide">

    </div>


  </section>


  <script src="./Resource/app.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

原因如下：

您創建了div具有相同 ID 的元素newcard.setAttribute('id', 'cardDetails');
您通過 id 查詢元素到 appendChild，所以它總是將元素添加到第一個創建的 div，document.getElementById('cardDetails').appendChild(bookTitle)

為了正確地做到這一點，您需要在每次創建時為 div 添加索引，以便我們可以正確找到它，或者使用newcard.appendChild(bookTitle)來確保您將元素添加到剛剛創建的 div

let myLibrary = [];

function Book(book, author, pages) {
  this.book = book;
  this.author = author;
  this.pages = pages;
}

function addBookToLibrary() {
  books = new Book(document.getElementById('book').value, document.getElementById('author').value, document.getElementById('pages').value)
  myLibrary.push(books);
}



bookinfo = document.getElementById('book').value
authorinfo = document.getElementById('author').value
pages = document.getElementById('pages').value
submit = document.getElementById('submit');
rightSide = document.getElementById('rightSide')



submit.addEventListener('click', e => {
  if (document.getElementById('book').value === '' || document.getElementById('author').value === '' ||
    document.getElementById('pages').value === '') {
    alert('add more information')
  } else {
    addBookToLibrary()
    addcard()
    document.getElementById('book').value = ''
    document.getElementById('author').value = ''
    document.getElementById('pages').value = ''

  }


})

function addcard() {


  // making a new div class for cards
  const newcard = document.createElement('div')

  // giving the new class attributs from my css style
  newcard.setAttribute('class', 'div')

  // adding the newly created div to parent element
  document.getElementById('rightSide').appendChild(newcard)

  //  form infomation into the cards h1's
  newcard.setAttribute('id', 'cardDetails');
  const bookTitle = document.createElement('h1')
  bookTitle.setAttribute('class', 'h1Style')
  const authorTitle = document.createElement('h1')
  authorTitle.setAttribute('class', 'h1Style')
  const pagesTitle = document.createElement('h1')
  pagesTitle.setAttribute('class', 'h1Style')

  // info from myLibrary array to created h1's
  for (i = 0; i < myLibrary.length; i  ) {
    bookTitle.innerHTML = `Book: ${myLibrary[i].book}`
    authorTitle.innerHTML = `Author: ${myLibrary[i].author} `
    pagesTitle.innerHTML = `${myLibrary[i].pages} pages`
  }



  // adding the h1's to the created div "cardDetails" with the value from my library
  newcard.appendChild(bookTitle)
  newcard.appendChild(authorTitle)
  newcard.appendChild(pagesTitle)

}

#cardDetails {
  margin: 5px;
  padding: 5px;
  border: 1px dashed #0088cc;
}

<!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">
  <title>Library</title>
  <link rel="stylesheet" href="./Resource/style.css">
</head>

<body>

  <section class="grid">
    <div class="leftSide">
      <form class="form">
        <h1> Book Library</h1>

        <label for="book">Book</label>
        <input type="text" id="book" name="book">

        <label for="author">Author</label>
        <input type="text" id="author" name="author">

        <label for="pages">Pages</label>
        <input type="text" id="pages" name="pages">

        <button type='button' class="submit" id="submit">submit</button>

      </form>

    </div>

    <div id="rightSide" class="rightSide">

    </div>


  </section>


  <script src="./Resource/app.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/512546.html

標籤：javascript数组for循环

上一篇：用于根據單元格值自動添加驗證下拉選單的GoogleApps腳本

下一篇：Bash：作業陣列的For回圈-Hoffman2