JavaScript报错：Cannot read properties of undefined (reading 'push') 求助

触发报错的核心问题 #

• 在Library构造函数中，你用let myLibrary = []声明的是函数局部变量，并非Library实例的属性，所以this.myLibrary是undefined，调用push自然抛出错误。
• 同时addToLibrary方法的参数名和局部变量重名，会导致参数覆盖局部变量，进一步混乱逻辑。

修正后的Library构造函数：

function Library() {
    // 将局部变量改为实例属性，确保实例能访问到数组
    this.myLibrary = [];

    // 参数名改为book，避免和属性重名，语义更清晰
    this.addToLibrary = function(book) {
        this.myLibrary.push(book);
    }
}

其他需要修正的代码问题 #

1. 未调用渲染函数：addToHTML函数定义后没有执行，就算数组有数据也不会渲染到页面。
2. 未定义的变量：函数里的titleInput、authorInput等变量不存在，会触发新的报错。
3. DOM元素复用问题：现有HTML里只有一行固定的tr，循环时会覆盖原有内容，应该动态创建每行的元素。
4. 重复DOM查询：循环内重复查询DOM元素，效率低下，应该提前获取。

修正后的addToHTML函数及调用逻辑：

function addToHTML() {
    // 提前获取tbody容器，避免重复查询
    const tbody = document.querySelector('#book-table tbody');
    // 清空原有内容，防止重复渲染
    tbody.innerHTML = '';

    for (let i = 0; i < library.myLibrary.length; i++) {
        const book = library.myLibrary[i];
        // 动态创建表格行和单元格
        const row = document.createElement('tr');
        
        const titleTd = document.createElement('td');
        titleTd.textContent = book.title;
        
        const authorTd = document.createElement('td');
        authorTd.textContent = book.author;
        
        const pagesTd = document.createElement('td');
        pagesTd.textContent = book.pages;
        
        const readTd = document.createElement('td');
        readTd.textContent = book.read;
        
        // 组装行并添加到tbody
        row.appendChild(titleTd);
        row.appendChild(authorTd);
        row.appendChild(pagesTd);
        row.appendChild(readTd);
        tbody.appendChild(row);
    }
}

// 添加书籍后调用渲染函数
library.addToLibrary(book1);
library.addToLibrary(book2); // 可添加第二本书测试
addToHTML();

HTML结构优化 #

移除tbody中预先定义的tr和td，改为动态生成：

<tbody>
    <!-- 动态生成的行将添加到这里 -->
</tbody>

内容的提问来源于stack exchange，提问作者Jabss