I'm trying to make my program store and displayed the user input in the array. So it must take user input, store it in the array and then render that to the html and add it to the table. So far it can display what is already in the array but once it takes the user input it does store it in the array but doesn't render it.

let books = [
    {
    title: "Naruto",
    author: "kishimoto",
    Pages: 400,
    status: true
},
{
    title: "One Piece",
    author: "Oda",
    Pages: 3000,
    status: false
}
];

function popForm(){
    $("#popup").removeClass("hide");
}

function hideForm(){
    $("#popup").addClass("hide");
    $("#main-page").removeClass("hide");
}

function toggle (){
    $("#main-page").addClass("hide");
   
}

const addBook = (event) => {
    event.preventDefault();
    let book = {
        title: $("#title").val(),
        author: $("#author").val(),
        pages: $("#pages").val(),
        status: $("#status").val()
    }

    books.push(book);
    document.forms[0].reset();
    
    localStorage.setItem('myMangaList', JSON.stringify(books));
    
    
}


let table = document.getElementById('di-books');
books.forEach(book => {
    let tr = document.createElement('tr');
    Object.entries(book).forEach(value => { 
       let td = document.createElement('td');
       td.innerHTML= value;
       tr.appendChild(td);
    });
    table.appendChild(tr);
    
    
});

* {
  font-family: 'Work Sans', sans-serif;
  text-align: center;
}

.hide {
  display: none;
}

table {

  border-collapse: collapse;
  width: 100%;
}

td,
th {
  /* border: 1px solid #dddddd; */
  text-align: center;
  padding: 8px;
}


#addBook {
  border-radius: 70%;
  background-color: #48abe0;
  color: white;
  border: none;
  padding: 5px;
  font-size: 31px;
  height: 65px;
  width: 65px;
  box-shadow: 0 2px 4px darkslategray;
  cursor: pointer;
  transition: all 0.2s ease;
  position: fixed;
  bottom: 25px;
  right: 25px;
}

.popup {
  /* background-color:; */
  width: 0px;
  height: 0px;
  overflow: hidden;
  transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55),
    top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 30%;
  /* box-shadow: 0px 1px 2px darken($royal, 40%); */
  border-radius: 7px;
  
  display: flex;
  flex-direction: column;
}

<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Edu NSW ACT Foundation:wght@500&family=Edu QLD Beginner:wght@400;600;700&family=Edu TAS Beginner:wght@700&family=Josefin Sans:wght@300&family=Montserrat:wght@100;600&family=Mouse Memoirs&family=Poppins:ital,wght@0,500;1,200&family=Quicksand:wght@300&family=Ubuntu:wght@300&family=Work Sans:wght@200&display=swap"
    rel="stylesheet">
<h1>Manga Library</h1>

<div id="popup" >
    <form>
        <label for="title">Manga Title:</label>
        <input type="text" id="title" name="title">

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

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

        <label for="status">Status:</label>
        <input type="checkbox" id="status" name="status">

        <button type="submit" id="submit" onclick="addBook(event); hideForm()" >Submit</button>

    </form>
</div>


<!-- onclick="addBook() -->
<div id="main-page">
    <h1>list</h1>
    <div id="books-grid">
        <table id="di-books">
            <tr>
                <th>Name</th>
                <th>Author</th>
                <th>Pages</th>
                <th>Status</th>
            </tr>
        </table>
    </div>

    <button id="addBook" onclick="popForm(); toggle()"> </button>

</div>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CodePudding user response：

You should update DOM content after pushing new book to the books array, Try this code :

function addBookToTable(book) {
      let table = document.getElementById("di-books");
      
      let tr = document.createElement("tr");
      Object.entries(book).forEach((value) => {
        let td = document.createElement("td");
        td.innerHTML = value;
        tr.appendChild(td);
      });
      table.appendChild(tr);
}

// then use it in your addBook function 
const addBook = (event) => {
      event.preventDefault();
      let book = {
        title: $("#title").val(),
        author: $("#author").val(),
        pages: $("#pages").val(),
        status: $("#status").val(),
      };

      books.push(book);
      document.forms[0].reset();
      // Update DOM
      addBookToTable(book) 
      localStorage.setItem("myMangaList", JSON.stringify(books));
};