New value of Array stays at the same card when pressing Submit Button-CodePudding

So basically, every time a user types in his/her information the saved value will go to the myLibrary array. and that information will be showed on a card.

submitting the form once works as intended, but when i use it again, all the value stays on the first card. and doesn't go to the newly created card.

image1
image2

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 >
    <div >
      <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'  id="submit">submit</button>

      </form>

    </div>

    <div id="rightSide" >

    </div>


  </section>


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

</html>

CodePudding user response：

The reason is listed below:

you created div element with same id newcard.setAttribute('id', 'cardDetails');
you query element by id to appendChild,so it always add element to the first created div,document.getElementById('cardDetails').appendChild(bookTitle)

In order to do it correctly,you need to add an index to the div each time you created,so that we can find it correctly,or using newcard.appendChild(bookTitle) instead to make sure you are add elements to the div that you just created

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 >
    <div >
      <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'  id="submit">submit</button>

      </form>

    </div>

    <div id="rightSide" >

    </div>


  </section>


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

</html>