练习仿Instagram前端项目时点击Post按钮无法新增评论列表求助

问题1：HTML结构未闭合导致DOM解析错位，元素获取失败 #

你代码中.like-counts对应的div没有正确闭合，原代码写为：

<div class="like-counts">
    <span>like 4,000</span>
<div>

第二个<div>缺少闭合斜杠，浏览器解析DOM树时会把后续元素的层级识别错误，导致document.querySelector("#post")获取到的元素为null，点击事件自然无法绑定生效。
修复方案：把上述代码的第二个div改为闭合标签：

<div class="like-counts">
    <span>like 4,000</span>
</div>

问题2：按键监听属性拼写错误，回车提交功能失效 #

你JS代码中判断回车的属性写为小写的event.keycode，正确的拼写为驼峰格式event.keyCode，也可以用更兼容的event.key === 'Enter'写法，避免属性废弃问题。
修复后的按键监听函数：

function addListAfterKeypress(event){
    if (inputLength() > 0 && event.keyCode === 13){
        createListElement();
    }
}

其他优化建议 #

• 你的HTML中存在大量重复ID（比如recommendation-section1、recommendation-people-selfi都重复定义了5次），ID在单页面中必须唯一，否则会导致元素选择异常，建议把重复的ID改为class属性。
• 可以在绑定事件前打印你获取的DOM元素做校验：console.log(postButton, input, ul)，如果打印结果为null，优先检查HTML结构是否有语法错误。

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