点击提交按钮无法创建DOM表格，但可覆盖初始化表格问题求助

项目背景 #

正在完成Odin Project全栈自学课程的Library App项目，目前卡在表格形式展示数据的功能上。

预期效果 #

点击「Submit Book」按钮时，无论页面初始是否有表格，都能自动生成表格并填充myLibrary中的数据，核心代码逻辑如下：

clearTable();
document.getElementById('table-container').appendChild(buildTable(myLibrary));

实际问题 #

点击「Submit Book」按钮后无任何反应。

特殊情况 #

如果页面初始化时用占位数组BOOKS生成表格（对应JS代码第170行），后续点击提交按钮和clearTable()函数均能正常工作，可正常添加新数据到表格中。

问题原因与修复方案 #

核心问题 #

clearTable()函数存在逻辑漏洞：当页面初始无表格时，函数尝试获取并移除不存在的表格元素，会抛出错误中断后续代码执行，导致表格生成逻辑无法触发。

修复步骤 #

1. 修正clearTable()函数
   添加表格存在性判断，避免无表格时报错：

   function clearTable() {
     const table = document.getElementById('book-table');
     if (table) { // 仅当表格存在时执行移除操作
       table.remove();
     }
   }
   

2. 确认buildTable()输出
   确保函数返回的表格元素带有id="book-table"，保证后续clearTable()能正确定位到表格；同时验证函数是否正确生成表头与数据行的DOM结构。
3. 检查事件绑定逻辑
   确认「Submit Book」按钮的点击事件已正确绑定，且逻辑顺序为：先将新书添加到myLibrary，再执行表格更新操作。

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