JavaScript Korrektur

content/showArticle.php

@@ -383,3 +383,4 @@ if ($replyAuthor === null) {
         <?php endif; ?>
     </section>
 </main>
+<script src="js/comments.js"></script>

js/comments.js

@@ -11,7 +11,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const parentCommentInput = document.getElementById("parent-comment-id");
     const replyInfo = document.getElementById("reply-info");
 
-    if (!form || !commentsList || !commentContent || !parentCommentInput || !replyInfo) {
+    if (!form || !commentsList || !commentContent || !parentCommentInput) {
         return;
     }
 
@@ -29,8 +29,13 @@ document.addEventListener("DOMContentLoaded", function () {
             event.preventDefault();
 
             parentCommentInput.value = replyLink.dataset.commentId;
-            replyInfo.textContent = "Antwort auf " + replyLink.dataset.author;
+
-            replyInfo.style.display = "block";
+            if (replyInfo) {
+                replyInfo.textContent =
+                    "Antwort auf " + replyLink.dataset.author;
+                replyInfo.style.display = "block";
+            }
+
             commentContent.focus();
         });
     }
@@ -58,14 +63,22 @@ document.addEventListener("DOMContentLoaded", function () {
                 "X-Requested-With": "XMLHttpRequest"
             }
         })
-            .then(response => response.json())
+            .then(function (response) {
-            .then(data => {
+                if (!response.ok) {
+                    throw new Error("Fehlerhafte Serverantwort.");
+                }
+
+                return response.json();
+            })
+            .then(function (data) {
                 if (!data.success) {
                     alert(data.message);
                     return;
                 }
 
-                const emptyMessage = commentsList.querySelector(".no-comments-message");
+                const emptyMessage = commentsList.querySelector(
+                    ".no-comments-message"
+                );
 
                 if (emptyMessage) {
                     emptyMessage.remove();
@@ -73,8 +86,9 @@ document.addEventListener("DOMContentLoaded", function () {
 
                 const commentElement = document.createElement("div");
                 commentElement.classList.add("comment-item");
+                commentElement.dataset.commentId = data.commentId;
 
-                if (parentCommentId) {
+                if (parentCommentId !== "") {
                     commentElement.classList.add("comment-reply");
 
                     commentElement.innerHTML = `
@@ -85,17 +99,16 @@ document.addEventListener("DOMContentLoaded", function () {
                         <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
                     `;
 
-                    const parentReplies = document.querySelector(
+                    const parentReplies = commentsList.querySelector(
                         `.comment-item[data-comment-id="${parentCommentId}"] .comment-replies`
                     );
 
                     if (parentReplies) {
                         parentReplies.appendChild(commentElement);
+                    } else {
+                        commentsList.prepend(commentElement);
                     }
-
                 } else {
-                    commentElement.dataset.commentId = data.commentId;
-
                     commentElement.innerHTML = `
                         <p>
                             <strong>${escapeHtml(data.author)}</strong>
@@ -103,11 +116,13 @@ document.addEventListener("DOMContentLoaded", function () {
                         </p>
                         <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
 
-                        <a href="#comment-form"
+                        <a
-                        class="reply-button"
+                            href="#comment-form"
-                        data-comment-id="${escapeHtml(data.commentId)}"
+                            class="reply-button"
-                        data-author="${escapeHtml(data.author)}">
+                            data-comment-id="${escapeHtml(data.commentId)}"
-                        Antworten
+                            data-author="${escapeHtml(data.author)}"
+                        >
+                            Antworten
                         </a>
 
                         <div class="comment-replies"></div>
@@ -115,7 +130,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
                     commentsList.prepend(commentElement);
 
-                    const newReplyButton = commentElement.querySelector(".reply-button");
+                    const newReplyButton =
+                        commentElement.querySelector(".reply-button");
 
                     if (newReplyButton) {
                         registerReplyButton(newReplyButton);
@@ -124,10 +140,14 @@ document.addEventListener("DOMContentLoaded", function () {
 
                 commentContent.value = "";
                 parentCommentInput.value = "";
-                replyInfo.textContent = "";
+
-                replyInfo.style.display = "none";
+                if (replyInfo) {
+                    replyInfo.textContent = "";
+                    replyInfo.style.display = "none";
+                }
             })
-            .catch(() => {
+            .catch(function (error) {
+                console.error(error);
                 alert("Kommentar konnte nicht gesendet werden.");
             });
     });
@@ -135,12 +155,12 @@ document.addEventListener("DOMContentLoaded", function () {
     /**
      * Entfernt HTML-Sonderzeichen aus Nutzereingaben.
      *
-     * @param {string} text Zu bereinigender Text
+     * @param {*} text Zu bereinigender Text
      * @returns {string} Sicherer Text
      */
     function escapeHtml(text) {
         const div = document.createElement("div");
-        div.textContent = text;
+        div.textContent = String(text ?? "");
         return div.innerHTML;
     }
 });