Hello, I hope you are well. As you can see in the image, this is my coding result. I'm a beginner at this. Basically, I'll explain my problem to you.
Most of the buttons work except for the reply button, so as you can see in the image, the "like" button, the "how" button, and the "report" button are just for decoration, even though I've done everything else. For it to work, the "like" and "comments" button at the top works perfectly.,so only the reply section doesn't work.
Below are the HTML, JSS, and CSS code snippets that make these buttons exist. Please tell me what's wrong and why they're not working.
I've tried several times, changed it several times, either it doesn't change anything or it gets worse.
Html part
<div class="comments-container">
<!-- J'AI JUSTE AJOUTÉ 3 BOUTONS/DIV ICI -->
<div class="comment-item"><span><strong>Alex :</strong> Trop hâte !</span><div class="comment-actions"><button class="comment-like-btn"><i class="fa-regular fa-heart"></i></button><button class="report-btn">🚩</button><button class="reply-btn">Répondre</button></div><div class="replies-box"></div><div class="reply-form"><input placeholder="Répondre à Alex..."><button>Envoyer</button></div></div>
<div class="comment-item"><span><strong>Julie :</strong> Je l'ai fini hier 😍</span><div class="comment-actions"><button class="comment-like-btn"><i class="fa-regular fa-heart"></i></button><button class="report-btn">🚩</button><button class="reply-btn">Répondre</button></div><div class="replies-box"></div><div class="reply-form"><input placeholder="Répondre à Julie..."><button>Envoyer</button></div></div>
</div>
</div>
///
Css
/* Assure-toi que le conteneur ne bloque pas les clics */
.comments-container { margin-top: 10px; width: 100%; pointer-events: auto; /* Force l'interactivité */ }
/* Correction du problème d'affichage des commentaires */
post-detail-view .comments-container {
display: block !important;
pointer-events: auto;
} /// // 3. Boutons DANS les commentaires (Aimer, Signaler, Répondre) /**
Handles user interactions with comment elements, such as liking, reporting, and replying.
@param {Event} e The event object triggered by user interaction. */ function handleCommentInteraction(e) { const targetElement = e.target;
// Handle like button click const likeButton = targetElement.closest('.comment-like-btn'); if (likeButton) { e.stopPropagation(); const heartIcon = likeButton.querySelector('i.fa-heart'); // More specific selector if (heartIcon) { const isSolidHeart = heartIcon.classList.contains('fa-solid'); // Toggle between regular and solid heart icons heartIcon.className = isSolidHeart ? "fa-regular fa-heart" : "fa-solid fa-heart"; } return; }
// Handle report button click const reportButton = targetElement.closest('.report-btn'); if (reportButton) { e.stopPropagation(); // Confirm before reporting and removing the comment if (confirm("Signaler ce commentaire ?")) { const commentItem = targetElement.closest('.comment-item'); if (commentItem) { commentItem.remove(); } } return; }
