добавление комментариев к первому сообщению только в ванильном JavaScript

ProgramBox

добавление комментариев к первому сообщению только в ванильном JavaScript

Post author:admin
Запись опубликована:10 марта, 2023
Post category:Вопросы по программированию

#javascript #html #web-frontend

#javascript #HTML #веб-интерфейс

Вопрос:

Я создаю систему публикации статуса и комментариев. Это реализовано в ванильном 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();
 }

Ответ №1:

Когда вы используете код, подобный:

 createComment.innerHTML = commentHTMLValue;

вы полностью заменяете содержимое элемента. Попробуйте использовать:

 createComment.innerHTML  = commentHTMLValue;

который добавляет новое содержимое в конец существующего содержимого.

1. дорогой ATD, это дает мне те же результаты

2. Вы изменили их ВСЕ — например, createPost.innerHTML = htmlVal;} на createPost.innerHTML = htmlVal;}

3. да!! те же результаты, есть несколько сообщений, что и в facebook, но я могу прокомментировать первое сообщение. я вижу несколько сообщений, но я могу прокомментировать первое сообщение. не знаю, почему это происходит!

4. Я думаю, что это эта строка: var createComment = document.getElementById("comments-portion"); Если существует более одного элемента с символом id of comments-portion , вам нужно найти правильный, поскольку вы ориентируетесь только на первый. Итак, вам нужно либо перебирать их, либо дать им что-то уникальное, чтобы нацелить их напрямую.

5. теперь я пытаюсь понять, как я могу это сделать. Я новичок, поэтому я немного смущен.

Ответ №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>

1. Конечно, это мой код — ваш будет выглядеть по-другому, поскольку вы используете форму, и вы хотите использовать текстовые поля, а не подсказки для получения текста задач / комментариев. Я также не использовал EventListener — просто чтобы мне было проще. Но это должно дать вам представление о том, как все может работать и как хранить, обновлять, удалять и извлекать данные. Как всегда, есть лучшие способы сделать что-то — и я призываю вас найти их, а не просто списывать мой код. И, конечно, в моем нет реального стиля — это тоже зависит от вас!

2. Да, я узнал из вашего кода, теперь я буду реализовывать это с нуля. Теперь мне многое ясно.

3. Это здорово! Я намеревался сделать именно это — дать вам достаточно знаний, но не писать весь ваш код за вас; o)