Comment Appending On The First Post Only In Vanilla Javascript

December 11, 2023 Post a Comment

I am creating a status posting and commenting system. It is implemented in Vanilla JavaScript. Anyone can add a post and can comment on the post. Everything is working fine but the

Solution 1:

When you use code like:

createComment.innerHTML = commentHTMLValue;

you are completely replacing the contents of the element. Try using:

createComment.innerHTML += commentHTMLValue;

which appends new content to the end of the existing contents.

Solution 2:

I can't do a snippet here as the use of localStorage is not allowed. Copy this block into a blank file and save it as an html file and then open that in a browser.

Baca Juga

This is how I think you are describing your requirements and is also based on the data format in my comments. It's not pretty and needs plenty of sprucing up, but it runs.

<!DOCTYPE html><METAHTTP-EQUIV="Content-Type"CONTENT="text/html; charset=UTF-8"><html><head><title>Task listing</title><scripttype="text/javascript">let taskList = [];

functioncheckTasks() {
  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();
}

functiondisplayTasks() {
  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);
  })
}

functionaddComment(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();
  }
}

functionaddNewTask() {
  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();
}

functiondeleteComment(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 arrayif (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();

}

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

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

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

functionremoveAll() {
  localStorage.removeItem("tasks");
  localStorage.removeItem("tasksindex");
  displayTasks();

}

window.onload = checkTasks;


</script><styletype="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 <buttonid="addNewTaskButton"onclick="addNewTask();">Add new task</button></h2><hr><divid="tasks"></div><buttonid="removeAll"onclick="removeAll();">Remove all tasks</button></body></html>

Html5 Dictionary

Comment Appending On The First Post Only In Vanilla Javascript

Solution 1:

Solution 2:

Post a Comment for "Comment Appending On The First Post Only In Vanilla Javascript"