JS实现评论区时报错Cannot read property appendChild of undefined如何解决

• 报错核心来自你写的无限for循环：for (i=0; 1; i++) 的判断条件永远为真，循环会无限制执行。
  • 第一次循环i=0时，能取到你刚创建的.talking元素，操作正常
  • 当i自增到1后，页面上总共只有1个.talking元素，document.getElementsByClassName('talking')[1] 返回undefined，调用appendChild方法就会抛出你遇到的类型错误
• 还有一个隐藏错误：你代码中直接用reply.value取值，但你HTML里输入框的类名是write，没有任何名为reply的元素，后续也会出现取值错误。
• 逻辑冗余：你已经通过makeDiv变量持有了刚创建的评论容器DOM对象，完全不需要再通过类名查询DOM再操作，直接操作makeDiv即可。

function summitComment() {
    // 先获取对应输入框元素
    const replyInput = document.querySelector('.write');
    const commentArea = document.querySelector('.commentArea');

    // 创建评论容器
    const makeDiv = document.createElement('div');
    makeDiv.className = 'talking';

    // 创建评论子元素
    const makeUser = document.createElement('span');
    const makeMsg = document.createElement('span');
    const makeBtn = document.createElement('button');

    makeUser.className = "commentUserId";
    makeMsg.className = "mentionUserComment";
    makeBtn.className = "deleteReply"; 

    makeMsg.innerHTML = replyInput.value;
    makeUser.innerHTML = "User_ID";
    makeBtn.innerHTML = "Delete";

    // 直接往当前创建的评论容器插入子元素，不需要查询DOM也不需要循环
    makeDiv.appendChild(makeUser);
    makeDiv.appendChild(makeMsg);
    makeDiv.appendChild(makeBtn);

    // 把完整评论插入评论区
    commentArea.appendChild(makeDiv);

    // 可选优化：提交后清空输入框
    replyInput.value = '';

    // 可选优化：给删除按钮绑定点击事件，点击删除当前评论
    makeBtn.addEventListener('click', () => {
        makeDiv.remove();
    })
}

修改后点击提交按钮不会再出现控制台报错，评论可以正常插入，也支持点击删除按钮删除对应评论。

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