How do I create a nested reply system in HTML, JS?

Question

I am working on a website where users can post text, and others can reply, so essentially a forum. I need the replies to be nested (up to a set point) and callable from a query string (each nest of replies needs to be correlated to a specific and dynamic query string). For now I am using local storage, but will eventually need to move to a database.

The main problems that I am encountering are the nesting and making it callable from a query string. It might be the way that I'm searching, but I've not found anyone talking about this. Is there even a way to do this? If not, how else should I go about doing it?

Please provide enough code so others can better understand or reproduce the problem. — Community, Mar 15 '23 at 02:37

score 1 · Accepted Answer · answered Mar 14 '23 at 23:42

You can use this function as a reference to add a reply to the interface.

let moreClass = document.querySelector("nav");
    sendBtn = document.querySelector(".sendBtn");
    comments = document.querySelector(".comments");
    let x =0;    
    console.log(sendBtn.getAttribute("value"))
    sendBtn.addEventListener("click",sendFunction)
    function sendFunction(){
            userTag = document.querySelector(".userTag").innerText;
            commentInput = document.querySelector(".commentInput");
            myValue= commentInput.value;
            const comment = document.createElement("div");
            comment.className="comment";
            comment.innerHTML=
                `<div class="commentUserPic">
                    <img width=100% src="../icons/profile_photo.png" alt="">
                </div>
                <div class="commentUserDesc">
                    <h2 class="commentUserName">${userTag}</h2>
                    <p class="commentContent">${myValue}</p>
                </div>`
            
            commentInput.value = "";
            comment.setAttribute("commentNumber",x);
            x++;
            comments.appendChild(comment);
            comments.scrollTop = comments.scrollHeight comments.clientHeight;
            
            
            
            })

I hope it helps.

How do I create a nested reply system in HTML, JS?

1 Answers1