仅在 Vanilla JavaScript 中附加在第一篇文章上的评论

Question

我正在创建一个状态发布和评论系统。 它是在 Vanilla JavaScript 中实现的。 任何人都可以添加帖子并对帖子发表评论。 一切正常，但评论部分仅在第一篇文章中工作。 删除评论和帖子工作正常。 我不知道问题是什么，如果有人可以帮助我.. 这是 HTML 代码

 <div class="container-post" id="container-post">
    <div class="create-post">
        <form>
            <div class="form-group">
                <div class="username">
                    <p class="name" style="top:15px;">User Name</p>
                </div>
                <p class="qoutes">
                    <textarea style=" font-size: 15pt;" class="form-control" id="enter-post" rows="7" id="mypara" placeholder="Share Your Thoughts..."></textarea>
                </p>
                <div class="postbar">
                    <button type="button" class="btn btn-primary post-me" id="post-button"> <span id="postText">Post</span></button>
                </div>
            </div>
        </form>
    </div>
    <hr class="line-bar">

    <div class="allpost">

        <div class="mainpost" id="post-div"></div>
       
    </div>

这是 JavaScript 代码

showTask();
showComment();

let addPost = document.getElementById("enter-post");
let addPostBtton = document.getElementById("post-button");

addPostBtton.addEventListener("click", function () {

var addPostVal = addPost.value;
if (addPostVal.trim() != 0) {
    let webtask = localStorage.getItem("localtask");

    if (webtask == null) {
        var taskObj = [];
    }
    else {
        taskObj = JSON.parse(webtask);
    }
    taskObj.push(addPostVal);
    localStorage.setItem("localtask", JSON.stringify(taskObj));

}

showTask();
});


function showTask() {
let webtask = localStorage.getItem("localtask");

if (webtask == null) {
    var taskObj = [];
}
else {
    taskObj = JSON.parse(webtask);
}

let htmlVal = '';
let createPost = document.getElementById("post-div");
taskObj.forEach((item, index) => {
    htmlVal += `
                <div class="post-class"><div class="username u-name">
                <p class="name i-name">${"User Name " + index}</p>
                <i class="fas fa-trash-alt" onclick="removePost(${index});"></i></button>
                </div>
                <hr>
                <p class="quotes">
                ${item}
                </p>
                <div class="comment-section" id="comment-section">
                    <p class="comment-qoute">
                        <textarea style=" font-size: 15pt;" class="form-control commentBox" rows="3" id="mypara" placeholder="Leave a comment"></textarea>
                    </p>
                    <button class="btn btn-primary comment-btn" id="commentBtn">comment</button>
                    <ul class="comments" id="comments-portion">
                        <p></p>

                    </ul>
            </div>
            </div>
                <br><br>`
});

createPost.innerHTML = htmlVal;
}

function removePost(index) {

let webtask = localStorage.getItem("localtask");
let taskObj = JSON.parse(webtask);
taskObj.splice(index, 1);
localStorage.setItem("localtask", JSON.stringify(taskObj));
showTask();
}

var commentPost = document.getElementById('mypara');
var commentBtn = document.getElementById('commentBtn');

commentBtn.addEventListener('click', function () {
var commentValue = commentPost.value;

if (commentValue.trim() != 0) {
    let commentTask = localStorage.getItem("comments");

    if (commentTask == null) {
        var commentObj = [];
    }
    else {
        commentObj = JSON.parse(commentTask);
    }
    commentObj.push(commentValue);
    localStorage.setItem("comments", JSON.stringify(commentObj));

}
showComment();
});


function showComment() {
let commentsTask = localStorage.getItem("comments");

if (commentsTask == null) {
    var commentObj = [];
}
else {
    commentObj = JSON.parse(commentsTask);
}

let commentHTMLValue = '';
var createComment = document.getElementById("comments-portion");
commentObj.forEach((item, index) => {
    commentHTMLValue += `<div class="comment-box-btn">
                            <p>${index + ". "}<span>${item}</span></p>
                            <i class="far fa-times-circle fa-2x" onclick="removeComment(${index});"></i>
                        </div>
                        `;
});

createComment.innerHTML = commentHTMLValue;
}


var deleteBtn = document.querySelector('.comment-del');
deleteBtn.addEventListener('click', () => {

});


// remove comment


function removeComment(index) {
let commentTask = localStorage.getItem("comments");
let commentObj = JSON.parse(commentTask);
commentObj.splice(index, 1);
localStorage.setItem("comments", JSON.stringify(commentObj));
showComment();
 }

Answer 1

当您使用以下代码时：

createComment.innerHTML = commentHTMLValue;

您正在完全替换元素的内容。 尝试使用：

createComment.innerHTML += commentHTMLValue;

将新内容附加到现有内容的末尾。

Answer 2

我不能在这里做一个片段，因为不允许使用 localStorage。 将此块复制到一个空白文件中并将其另存为 html 文件，然后在浏览器中打开它。

这就是我认为您描述您的要求的方式，也是基于我评论中的数据格式。 它不漂亮，需要大量修饰，但它可以运行。

<!DOCTYPE html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<html>
<head>
<title>Task listing</title>

<script type="text/javascript">

let taskList = [];

function checkTasks() {
  let tasksList = getTasksList();
  if (tasksList.length == 0) {
    let newTask = prompt("Please enter a task description");
    if (newTask) {
      let thisIndex = getNewIndex();
      let a = {"id": thisIndex, "task": newTask, "comments": []}
      taskList.push(a);
      saveTasksList(taskList);
    }
  }
  displayTasks();
}

function displayTasks() {
  let container = document.getElementById("tasks");
  container.innerHTML = "";
  let taskList = getTasksList();
  taskList.forEach(function(task){
    let d = document.createElement("div");
    d.id = "task_" + task.id;
    d.className = "commentdiv";
    d.innerHTML = "<h3>" + task.task + "</h3>";
    let l = document.createElement("ul");
    l.id = "comments_" + task.id;
    let comments = task.comments;
    if (comments.length > 0) {
      let commentindex = 0;
      comments.forEach(function(comment) {
        let c = document.createElement("li");
        c.innerHTML = comment;
        let cb = document.createElement("button");
        cb.id = "deletecomment_" + task.id + "_" + commentindex;
        cb.innerHTML = "Delete comment";
        cb.onclick = function() {deleteComment(task.id, commentindex);};
        c.appendChild(cb);
        l.appendChild(c);
      })
    }
    let b = document.createElement("button");
    b.id = "addcomment_" + task.id;
    b.onclick = function() {addComment(task.id);};
    b.innerHTML = "Add comment";
    d.appendChild(b);
    d.appendChild(l);
    container.appendChild(d);
  })
}

function addComment(taskid) {
  let newcomment = prompt("Enter comment");
  if (newcomment) {
    let tasklist = getTasksList();
    let filtered = tasklist.filter(task => task.id == taskid);
    if (filtered[0]) {
      let thisTask = filtered[0];
      thisTask.comments.push(newcomment);
      let thisIndex = taskList.findIndex((task) => task.id == taskid);
      taskList[thisIndex] = thisTask;
    }
    saveTasksList(taskList);
    displayTasks();
  }
}

function addNewTask() {
  let newTask = prompt("Enter task description");
  let taskList = getTasksList();
  let lastindex = localStorage.getItem("tasksindex");
  let index = getNewIndex();
  let a = {"id": index, "task": newTask, "comments": []}
  taskList.push(a);
  saveTasksList(taskList);
  displayTasks();
}

function deleteComment(taskid, commentindex) {
  let tasklist = getTasksList();
  let filtered = tasklist.filter(task => task.id == taskid);
  // as long as there is at least one task with the taskid value, find and delete the comment
  // based on the index position of the comment in the comments array
  if (filtered[0]) {
    let thisTask = filtered[0];
    thisTask.comments.splice(commentindex, 1);
    let thisIndex = taskList.findIndex((task) => task.id == taskid);
    taskList[thisIndex] = thisTask;
  }
  saveTasksList(taskList);
  displayTasks();

}

function getTasksList() {
  let tasks = localStorage.getItem("tasks");
  taskList = JSON.parse(tasks);
  if (!taskList) {
    taskList = [];
  }
  return taskList;
}

function saveTasksList(taskList) {
  localStorage.setItem("tasks", JSON.stringify(taskList));
}

function getNewIndex() {
  let lastindex = localStorage.getItem("tasksindex");
  let idx = 0;
  if (!lastindex) {
    idx = 1;
  } else {
    idx = Number(lastindex) + 1;
  }
  localStorage.setItem("tasksindex", idx);
  return idx;
}

function removeAll() {
  localStorage.removeItem("tasks");
  localStorage.removeItem("tasksindex");
  displayTasks();

}

window.onload = checkTasks;


</script>

<style type="text/css">

.commentdiv {
  border:1px solid black;
  width:1000px;
  padding:5px;
  border-radius:5px;
}

button {
  margin-left:10px;
}

h3 {
  width:100%;
  border-bottom: 1px dotted black;
}

ul {
  list-style-type:decimal;
}

</style>
</head>
<body>
<h2>My task list <button id="addNewTaskButton" onclick="addNewTask();">Add new task</button></h2>
<hr>
<div id="tasks">

</div>
<button id="removeAll" onclick="removeAll();">Remove all tasks</button>
</body>
</html>