Odin Project图书馆项目：提交后bookCard不显示且报TypeError

1. 先搞定Cannot read properties of null (reading 'title')报错 #

这个错误的核心是你尝试读取一个null对象的title属性，说白了就是要获取的表单元素没拿到，常见两种情况：

• DOM没加载完就执行代码：如果你的script.js放在HTML头部，浏览器还没渲染表单就去拿元素，肯定返回null。要么把脚本挪到</body>标签前，要么用DOMContentLoaded把操作DOM的代码包起来：

  document.addEventListener('DOMContentLoaded', function() {
    // 所有和DOM相关的代码都放这儿
    const form = document.getElementById('你的表单ID');
    // ...后续逻辑
  });
  

• 选择器写错了：检查获取标题输入框的代码，比如document.getElementById('title-input')里的ID，是不是和HTML中输入框的id完全一致，大小写、拼写都不能错。

2. 解决提交后弹overlay不显示bookCard的问题 #

这大概率是表单提交的默认行为没阻止，加上前面的报错中断了卡片创建逻辑导致的：

• 阻止页面刷新：表单提交默认会刷新页面，之前的操作全白做，还可能误触发overlay的显示逻辑。在提交事件里加一行阻止默认行为的代码：

  form.addEventListener('submit', function(e) {
    e.preventDefault(); // 关键：阻止页面刷新
    // 这里写拿表单数据、创建卡片的代码
    const title = document.getElementById('title-input').value;
    const author = document.getElementById('author-input').value;
    // ...其他字段
    createBookCard(title, author); // 调用创建卡片的函数
    // 可选：清空表单
    form.reset();
  });
  

• 检查overlay的触发逻辑：看看是不是把overlay的显示代码错绑到了表单提交事件上，或者页面刷新时自动触发了它。比如如果overlay是window.onload时显示的，页面一刷新就会弹，得调整触发条件。

3. 确认bookCard的创建逻辑没问题 #

确保你写的创建卡片函数能正确把卡片加到library-container里：

• 先检查library-container的选择器对不对，比如document.getElementById('library-container')能不能拿到对应的DOM元素。
• 再确认创建卡片的代码没语法错误，比如：

  function createBookCard(title, author) {
    const card = document.createElement('div');
    card.classList.add('book-card');
    card.innerHTML = `
      <h3>${title}</h3>
      <p>作者：${author}</p>
    `;
    const libraryContainer = document.getElementById('library-container');
    libraryContainer.appendChild(card); // 确保容器存在再添加
  }
  

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