类型错误，无法读取javascript中未定义的属性(阅读“push”)

cx6n0qe3 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(173)

我试图显示数据数组到一个html表。我认为我已经做了一切正确的，但它似乎仍然存在的错误。我试图做一些研究，为什么错误发生，因为我看到我正在初始化数组的正确，我也试图移动新的对象之前的函数的地方推方法被调用。我想我可能错过了一些愚蠢的，但我不能'I don "我似乎没有指出这一点。以下是JavaScript和HTML代码：

// 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>

JavaScript

来源：https://stackoverflow.com/questions/75116943/typeerror-cannot-read-properties-of-undefined-reading-push-in-javascript

1条答案

按热度按时间

5gfr0r5j1#

这是你的代码的工作版本。你的错误是在同一个函数中输入了一个用let定义的数据作为“this.”，并且在同一个函数中使用了两次相同的变量名。

// 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);
 }
   }

赞(0）回复(0）举报 2023-01-16

我来回答

类型错误，无法读取javascript中未定义的属性(阅读“push”)

1条答案

相关问题

热门标签

最新问答