TypeError, Cannot read properties of undefined (reading 'push') in javascript-CodePudding

I am trying to display arrays of data to a html table. I think that I've done everything right so far but it seems like the error is still there. I tried to do some research on why the errors occurs and as I see I am initializing the array's correctly and I also tried to move the new objects before the function of where the push method is invoked. I think that I may have missed something silly but i can't seem to point it out. The following are the javascript and html code:

// Main Book object model
function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;  
}


// Library object model
function Library() {
    let myLibrary = [];

    this.addToLibrary = function(myLibrary) {
        this.myLibrary.push(myLibrary);
    }
}

// Create new book object
let book1 = new Book('Awaken the Giant Within', 'Tony Robbins', '351', 'already read');
let book2 = new Book('Think and Grow Rich', 'Napoleon Hill', '271', 'currently reading');

// Create new library object
let library = new Library;

// Add books to the empty array
library.addToLibrary(book1);

// Function to add Main Book to HTML content
function addToHTML() {
    for (let i=0; i < library.myLibrary.length; i   ) {

        let dataContainer = document.querySelector('#dataContainer');

        let titleColumn = document.getElementById('title');
        let authorColumn = document.getElementById('author');
        let pagesColumn = document.getElementById('pages');
        let readColumn = document.getElementById('read');

        let book_title = library.myLibrary[i].title;
        let book_author = library.myLibrary[i].author;
        let book_pages = library.myLibrary[i].pages;
        let book_read = library.myLibrary[i].read;
        
        titleColumn.innerHTML = book_title;
        authorColumn.innerHTML = book_author;
        pagesColumn.innerHTML = book_pages;
        readColumn.innerHTML = book_read;

        dataContainer.appendChild(titleInput);
        dataContainer.appendChild(authorInput);
        dataContainer.appendChild(pagesInput);
        dataContainer.appendChild(readInput);
    }
}

    <!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">
        
        <link rel="stylesheet" href="style.css">
        <title>Book Object</title>
    </head>
    
    <body>
        <h1>Book template</h1>
    
        <form>
            <table id="book-table">
                <thead>
                    <tr>
                        <th> Title </th>
                        <th> Author </th>
                        <th> Pages </th>
                        <th> Read </th>
                    </tr>
                </thead>
    
                <tbody>
                    <tr id="dataContainer">
                        <td id="title"></td>
                        <td id="author"></td>
                        <td id="pages"></td>
                        <td id="read"></td>
                    </tr>
                </tbody>
            </table>
        </form>
    
        <script src="script.js"></script>
    </body>
    </html>

CodePudding user response：

Here's the working version of your code. Your error is to enter a data defined with let in the same function as "this." and use the same variable name 2 times within the same function.

// Main Book object model
function Book(title, author, pages, read) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.read = read;  
}


// Library object model
function Library() {
    let myLibrary = [];

    this.addToLibrary = function(item) {  // error fixed
        myLibrary.push(item); // error fixed
    }
}

// Create new book object
let book1 = new Book('Awaken the Giant Within', 'Tony Robbins', '351', 'already read');
let book2 = new Book('Think and Grow Rich', 'Napoleon Hill', '271', 'currently reading');

// Create new library object
let library = new Library;

// Add books to the empty array
library.addToLibrary(book1);


// Function to add Main Book to HTML content
function addToHTML() {
   for (let i=0; i < library.myLibrary.length; i   ) {

      let dataContainer = document.querySelector('#dataContainer');

      let titleColumn = document.getElementById('title');
      let authorColumn = document.getElementById('author');
      let pagesColumn = document.getElementById('pages');
      let readColumn = document.getElementById('read');

      let book_title = library.myLibrary[i].title;
      let book_author = library.myLibrary[i].author;
      let book_pages = library.myLibrary[i].pages;
      let book_read = library.myLibrary[i].read;
    
      titleColumn.innerHTML = book_title;
      authorColumn.innerHTML = book_author;
      pagesColumn.innerHTML = book_pages;
      readColumn.innerHTML = book_read;

      dataContainer.appendChild(titleInput);
      dataContainer.appendChild(authorInput);
      dataContainer.appendChild(pagesInput);
      dataContainer.appendChild(readInput);
 }
   }