获取错误“无法读取未定义的属性附加子项

Question

<div class="commentArea"></div>
<input class="write" type="text">
<button onclick="summitComment()" class="summit">summit</button>
<script type="text/javascript" src="main.js"></script>

function summitComment() {
    let comments = document.getElementsByClassName('commentArea')[0];

    let makeDiv = document.createElement('div');
    makeDiv.className = 'talking';

    comments.appendChild(makeDiv)

    let makeUser = document.createElement('span');
    let makeMsg = document.createElement('span');
    let makeBtn = document.createElement('button');

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

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

    for (i=0; 1; i++) {
        document.getElementsByClassName('talking')[i].appendChild(makeUser)
        document.getElementsByClassName('talking')[i].appendChild(makeMsg)
        document.getElementsByClassName('talking')[i].appendChild(makeBtn)
    }
}

我正在学习 javascript，我尝试为网页制作评论部分。 第一个代码是 HTML 代码，第二个是 JS 代码。 但是当我写一些东西并点击峰会按钮时，它的工作。 但控制台向我显示错误

未捕获的类型错误：无法读取未定义的属性“appendChild”

我认为 getElementsByClassName 似乎没有选择“createElement”创建的标签。

我不知道如何解决。

Answer 1

reply变量未定义，最后这个循环我认为不需要

 function summitComment() { let comments = document.getElementsByClassName('commentArea')[0]; let reply = document.querySelector('.write'); let makeDiv = document.createElement('div'); makeDiv.className = 'talking'; comments.appendChild(makeDiv); let makeUser = document.createElement('span'); let makeMsg = document.createElement('span'); let makeBtn = document.createElement('button'); makeUser.className = "commentUserId"; makeMsg.className = "mentionUserComment"; makeBtn.className = "deleteReply"; makeMsg.innerHTML = reply.value; makeUser.innerHTML = "User_ID"; makeBtn.innerHTML = "Delete"; makeDiv.appendChild(makeUser) makeDiv.appendChild(makeMsg) makeDiv.appendChild(makeBtn) }

 <div class="commentArea"></div> <input class="write" type="text"> <button onclick="summitComment()" class="summit">summit</button> <script type="text/javascript" src="main.js"></script>

Answer 2

因为appendChild不能从undefined读取你需要在追加之前检查元素存在而不是：

var element = document.getElementsByClassName('talking');
for (i=0; 1; i++) {
    element?.[i]?.appendChild(makeUser)
    element?.[i]?.appendChild(makeMsg)
    element?.[i]?.appendChild(makeBtn)
}

Answer 3

尝试使用if (!!comment) comments.appendChild(makeDiv)而不是仅使用comments.appendChild(makeDiv)

Answer 4

getElementByClassName 返回单个 DOM 元素。 你不需要对它做 '[0]' 。 删除它，它应该可以正常工作。

如果您使用 querySelectorAll，那么您将通过索引获取，因为此方法返回一个数组。