How to append value of forms to the object array-CodePudding

i am building a simple application that should embed the submitted forms text fields to the table below. i have already made a addtotable function that displays the library arrays objects to the table when manually added.

now upon clicking submit button, i need the forms text fields to go to the array of objects with the thinking that it will also be displayed because of addtotable function.

function Book(name, author, ReadOrNot) {
  this.name = name
  this.author = author
  this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")

let myLibrary = []

function addBookToLibrary(...arr) {
  myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)
addBookToLibrary(book3)

function addBookToTable() {
  let tbody = document.querySelector('tbody')

  myLibrary.forEach(b => {
    let tr = document.createElement('tr')
    let content = '<td>'   b.name   '</td><td>'   b.author   '</td>'

    if (b.ReadOrNot == 'Read') {
      content  = '<td><button id="readbtn" >Read</button></td>'
    } else if (b.ReadOrNot == 'Not read') {
      content  = '<td><button id="readbtn" >Not read</button></td>'
    }

    content  = '<td><button  onclick="toggleDelete(this)">Delete</button></td>'
    tr.innerHTML = content
    tbody.appendChild(tr)
  })
}

addBookToTable()

function toggleDelete(o) {
  let p = o.parentNode.parentNode;
  p.parentNode.removeChild(p);
}

<form>
  <div>
    <label for="Book">Book</label>
    <input type="text" id="Book">
  </div>
  <div>
    <label for="Author">Author</label>
    <input type="text" id="Author">
  </div>
  <div>
    <label for="status">Status</label>
    <select name="status" id="Status">
      <option value="Read">Read</option>
      <option value="Not read">Not read</option>
    </select>
  </div>
  <br>
  <div>
    <button type="submit"  onclick>Submit</button>
  </div>
</form>
<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Author</td>
      <td>Status</td>
      <td> </td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CodePudding user response：

First of all, you need convert your addBookToTable() so it accepts a single book instead of adding all books at once. Then you need a function that reads values from input fields and add them into a new book.

const elBook = document.getElementById("Book"),
      elAuthor = document.getElementById("Author"),
      elStatus = document.getElementById("Status"),
      elTbody = document.querySelector('tbody');

function Book(name, author, ReadOrNot) {
    this.name = name
    this.author = author
    this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A Game of Thrones", "George R.R. Martin", "Not read")
const book3 = new Book("Jane Eyre", "Charlotte Brontë", "Read")


let myLibrary = []


function addBookToLibrary(...arr) {
 myLibrary.push(...arr)
}

addBookToLibrary(book1, book2, book3)

function submitBook()
{
  if (!elBook.value.trim() || !elAuthor.value.trim())
    return false;

  const newBook = new Book(elBook.value, elAuthor.value, elStatus.value);
  elBook.value = elAuthor.value = "";
  elStatus.value = "Read"
  addBookToLibrary(newBook);
  addBookToTable(newBook);
  return false;
}

myLibrary.forEach(addBookToTable);
function addBookToTable(b){

  let tr = document.createElement('tr')
  let content = '<td>'   b.name   '</td><td>'   b.author   '</td>'

  if(b.ReadOrNot == 'Read'){
    content  = '<td><button id="readbtn" >Read</button></td>'  
   }
   else if(b.ReadOrNot == 'Not read'){
     content  = '<td><button id="readbtn" >Not read</button></td>'
   }

   content  = '<td><button  onclick="toggleDelete(this)">Delete</button></td>'
  tr.innerHTML = content
  elTbody.appendChild(tr)
}
  
  function toggleDelete(o) {
    let p = o.parentNode.parentNode;
    p.parentNode.removeChild(p);
  }

<form>
        <div>
            <label for="Book">Book</label>
            <input type="text" id="Book">
        </div>
        
         <div>
            <label for="Author">Author</label>
            <input type="text" id="Author">
         </div>
    
        <div>
            <label for="status">Status</label>
            <select name="status" id="Status">
                <option value="Read">Read</option>
                <option value="Not read">Not read</option>
            </select>
            
        </div>

       <br>
       
        <div> 
            <button type="submit"  onclick="return submitBook()">Submit</button>
        </div>
    </form>

    <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            
        </tbody>
    </table>

CodePudding user response：

let add=document.getElementById("add")
    let submit=()=>{
        let book=document.getElementById("Book").value
        let author=document.getElementById("Author").value
        let select=document.getElementById("Status").value
        let values=[book,author,select]
        let tr=document.createElement("tr")
        for(let i of values){
            let td=document.createElement("td")
            td.textContent=i
            tr.appendChild(td)
            add.appendChild(tr)
        }
        
    }

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

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

<div>
    <label for="status">Status</label>
    <select name="status" id="Status">
        <option value="Read">Read</option>
        <option value="Not read">Not read</option>
    </select>
    
</div>

<br>

<div> 
    <button type="submit"  onclick="submit()">Submit</button>
</div>
</form>

<table>
<thead>
    <tr>
        <td>Name</td>
        <td>Author</td>
        <td>Status</td>
        <td>      </td>
    </tr>
</thead>

<tbody id="add">

</tbody>
</table>