title: How do I display object values on html table
body: <p>I am trying to display object values on a new table row but i get &quot;undefined&quot; instead.</p>
  <p>the user inputs information of a book in a form on the html and my aim is to display it using a button on-click &quot;displayBooks()&quot;</p>
  <p>here's the JavaScript with the &quot;displayBooks()&quot; function i'm having trouble with</p>
  <pre><code>//array to store the books
  let books = [];
  
  //book constructor
  class Book {
      constructor(title, author, genre, review) {
          this.title = title;
          this.author = author;
          this.genre = genre;
          this.review = review;
      }
  }
  
  //creates new object from values input in html
  function createBook() {
  
      let book = new Book(
          document.getElementById(&quot;title&quot;).value,
          document.getElementById(&quot;author&quot;).value,
          document.getElementById(&quot;genre&quot;).value,
          document.getElementById(&quot;review&quot;).value
      )
      console.log(book);
      books.push(book);
      localStorage.setItem(&quot;Books&quot;, JSON.stringify(books));
      displayBooks();
      
  }
  
  function displayBooks() {
     //getting the object from local storage
        let books = JSON.parse(localStorage.getItem(&quot;Books&quot;)); console.log(books);
  
         let table = document.getElementById(&quot;table&quot;);
      
         var newRow = table.insertRow(table.length),
         cell1 = newRow.insertCell(0),
         cell2 = newRow.insertCell(1),
         cell3 = newRow.insertCell(2),
         cell4 = newRow.insertCell(3)
         title = books.title,
         author = books.author,
         genre = books.genre,
         review = books.review;
      
      cell1.innerHTML = title;
      cell2.innerHTML = author;
      cell3.innerHTML = genre;
      cell4.innerHTML = review;
      }
  </code></pre>