Fehlerbehebung

js/comments.js

@@ -16,15 +16,24 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     /**
-     * Registriert alle Antwort-Buttons.
+     * Aktiviert einen einzelnen Antworten-Button.
+     *
+     * @param {HTMLButtonElement} button Antworten-Button
      */
-    document.querySelectorAll(".reply-button").forEach(function (button) {
+    function registerReplyButton(button) {
         button.addEventListener("click", function () {
             parentCommentInput.value = button.dataset.commentId;
             replyInfo.textContent = "Antwort auf " + button.dataset.author;
             replyInfo.style.display = "block";
             commentContent.focus();
         });
+    }
+
+    /**
+     * Registriert alle bereits vorhandenen Antwort-Buttons.
+     */
+    document.querySelectorAll(".reply-button").forEach(function (button) {
+        registerReplyButton(button);
     });
 
     /**
@@ -58,17 +67,15 @@ document.addEventListener("DOMContentLoaded", function () {
 
                 if (parentCommentId) {
                     commentElement.classList.add("comment-reply");
-                }
 
-                commentElement.innerHTML = `
-                    <p>
-                        <strong>${escapeHtml(data.author)}</strong>
-                        <span>${escapeHtml(data.created)}</span>
-                    </p>
-                    <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
-                `;
+                    commentElement.innerHTML = `
+                        <p>
+                            <strong>${escapeHtml(data.author)}</strong>
+                            <span>${escapeHtml(data.created)}</span>
+                        </p>
+                        <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
+                    `;
 
-                if (parentCommentId) {
                     const parentReplies = document.querySelector(
                         `.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
                     );
@@ -76,8 +83,34 @@ document.addEventListener("DOMContentLoaded", function () {
                     if (parentReplies) {
                         parentReplies.appendChild(commentElement);
                     }
+
                 } else {
+                    commentElement.dataset.commentId = data.commentId;
+
+                    commentElement.innerHTML = `
+                        <p>
+                            <strong>${escapeHtml(data.author)}</strong>
+                            <span>${escapeHtml(data.created)}</span>
+                        </p>
+                        <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
+
+                        <button type="button"
+                                class="reply-button"
+                                data-comment-id="${escapeHtml(data.commentId)}"
+                                data-author="${escapeHtml(data.author)}">
+                            Antworten
+                        </button>
+
+                        <div class="comment-replies"></div>
+                    `;
+
                     commentsList.prepend(commentElement);
+
+                    const newReplyButton = commentElement.querySelector(".reply-button");
+
+                    if (newReplyButton) {
+                        registerReplyButton(newReplyButton);
+                    }
                 }
 
                 commentContent.value = "";