Javascript 如何为注释创建一个表单，并能够动态地将注释添加到列表中？

我需要为注释创建一个表单，能够动态地将它们添加到列表中。每个注释都应按连续顺序分配ID。最新的评论应该在最下面。注释应存储在注释数组中。每个注释都应该具有id（数字）和文本（字符串）等属性。最初加载时，注释数组必须为空。每次单击“添加”按钮都应该在数组中创建一个新对象，并在DOM树中创建元素

设nextId=1；
常量注释=[]；
const commentForm=document.querySelector（“[data id=“comment form”]”）；
const commentInput=commentForm.querySelector（“[data input=“comment”]”）；
const button=commentForm.querySelector（“[data action=“add”]”）；
const commentList=commentForm.querySelector（'[data id=“comment list”]'）；
按钮。addEventListener（'单击'，（）=>{
常量对象={}；
如果（commentInput.value！=''）{
comments.map（（）=>（{id:'nextId++'，text:commentInput.value}））；
}
createElement（）；
});
函数createElement（）{
const newComment=document.createElement（'li'）；
setAttribute（'data-comment-id'，comments.id'）；
newComment.textContent=comments.text；
commentList.appendChild（新成员）；
}

添加

您的代码中存在一些问题：

您正试图从commentForm访问commentList，但该元素在commentForm之外。使用文档对象访问元素

comments是一个数组，您试图从中访问text属性，comments上有text属性

您应该将当前输入值传递给函数，以便可以使用该值设置新创建的li文本

应该使用

push（）

而不是

map（）

将项目推入数组

nextId

是一个变量，但如果将其当作字符串使用，则应删除其周围的引号

为了更好的用户体验，我建议您在创建项目后清除输入的值

演示：

设nextId=1；
常量注释=[]；
const commentForm=document.querySelector（“[data id=“comment form”]”）；
const commentInput=commentForm.querySelector（“[data input=“comment”]”）；
const button=commentForm.querySelector（“[data action=“add”]”）；
const commentList=document.querySelector（'[data id=“comment list”]'）；
按钮。addEventListener（'单击'，（）=>{
常量对象={}；
如果（commentInput.value！=''）{
comments.push（{id:nextId++，text:commentInput.value}）；
}
createElement（commentInput.value）；
commentInput.value=''；
});
函数createElement（ci）{
const newComment=document.createElement（'li'）；
setAttribute（'data-comment-id'，comments.id'）；
newComment.textContent=ci；
commentList.appendChild（新成员）；
}

添加