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?
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.