Estoy tratando de hacer varios cuadros de comentarios para un sitio web. El primer clic para crear el área de texto y el botón Enviar funciona bien. Sin embargo, cuando hago clic en otro, agrega el área de texto y el botón de envío dos veces, creando dos áreas de texto y botones de envío y luego tres, y así sucesivamente.
Si va a https://alexpd93.github.io/FAC-Website/ y hace clic en varios botones de comentarios, debería tener más sentido.
Me gustaría que cada vez que haga clic en el botón de comentar, solo cree un área de texto para cada sección.
¿Cómo puedo arreglar esto?
function addComment(element) { const boxContainer = element.parentNode.parentNode.parentNode; const commentContainer = element.parentNode; commentContainer.classList.add("comment-container-after-click"); const commentBox = document.createElement("textarea"); commentBox.classList.add("comment-box-after-click"); commentBox.placeholder = "What are your thoughts?"; commentBox.innerHTML = ""; const submitComment = document.createElement("button"); submitComment.classList.add("submit-comment-after-click"); submitComment.innerHTML = "Comment"; commentContainer.append(commentBox, submitComment); submitComment.onclick = function submitComment() { let comment = commentBox.value; const newComments = document.createElement("p"); boxContainer.appendChild(newComments); newComments.innerHTML = `${comment}`; commentBox.value = ""; }; } function comment(event) { const commentButton = event.target; commentButton.style.display = "none"; const commentIcon = document.getElementsByClassName("comment-icon"); const iconArray = Array.from(commentIcon); iconArray.forEach((icon) => { if (icon.nextElementSibling.style.display === "none") { icon.style.display = "none"; addComment(commentButton); } }); } <div class="comments-container" id="comments"> <img id="commentIcon" class="comment-icon" src="Images/Comment.png" alt="comment icon"> <button class="comment-button" id="commentButton" onclick="comment(event)" > Comment </button> </div>Después de jugar con el sitio web, creo que entendí el problema. Está llamando a addComment() para todos los elementos con comment-icon clase. Y debido a su (tbh) manejo un poco extraño de addComment() esto agrega un comentario a cada uno de estos elementos.
He corregido el siguiente error y marcado mis cambios con comentarios.
function addComment(element) { const boxContainer = element.parentNode.parentNode.parentNode; const commentContainer = element.parentNode; commentContainer.classList.add("comment-container-after-click"); const commentBox = document.createElement("textarea"); commentBox.classList.add("comment-box-after-click"); commentBox.placeholder = "What are your thoughts?"; commentBox.innerHTML = ""; const submitComment = document.createElement("button"); submitComment.classList.add("submit-comment-after-click"); submitComment.innerHTML = "Comment"; commentContainer.append(commentBox, submitComment); submitComment.onclick = function submitComment() { let comment = commentBox.value; const newComments = document.createElement("p"); // why append to the box container? Then all comments from different textareas will be merged // boxContainer.appendChild(newComments); commentContainer.appendChild(newComments); newComments.innerHTML = `${comment}`; commentBox.value = ""; }; } function comment(event) { const commentButton = event.target; commentButton.style.display = "none"; const commentIcon = document.getElementsByClassName("comment-icon"); // add the comment once not to every comment box available addComment(commentButton); const iconArray = Array.from(commentIcon); iconArray.forEach((icon) => { if (icon.nextElementSibling.style.display === "none") { icon.style.display = "none"; // this causes that the comment is added multiple times // addComment(commentButton); } }); } <div div="all-comments"> <div class="comments-container" id="comments"> <img id="commentIcon" class="comment-icon" src="https://dummyimage.com/100x100/000/fff" alt="comment icon"> <button class="comment-button" id="commentButton" onclick="comment(event)"> Comment </button> </div> <div class="comments-container" id="comments"> <img id="commentIcon" class="comment-icon" src="https://dummyimage.com/100x100/000/fff" alt="comment icon"> <button class="comment-button" id="commentButton" onclick="comment(event)"> Comment </button> </div> <div class="comments-container" id="comments"> <img id="commentIcon" class="comment-icon" src="https://dummyimage.com/100x100/000/fff" alt="comment icon"> <button class="comment-button" id="commentButton" onclick="comment(event)"> Comment </button> </div> </div>