Comment Appending On The First Post Only In Vanilla JavaScript

January 14, 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>
<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>

JavaScript Info

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"