Programador principiante absoluto aquí. Estoy tratando de crear un cuadro de comentarios donde todo lo que escriba en los comentarios se almacenará en otro div. Hice que algo funcionara, se pudo agregar, sin embargo, desaparece inmediatamente después. Quiero que almacene los comentarios en el div #comment-box y cuando ingrese otro comentario, lo almacenará debajo. Aquí está mi código hasta ahora
<div class="container"> <h2>Leave us a comment</h2> <form> <textarea id="" placeholder="Add Your Comment" value=" "></textarea> <div class="btn"> <input id="submit" type="submit" value="Comment"> <button id="clear"> 🙏</button> </div> </form> </div> <div class="comments"> <h2>Comments</h2> <div id="comment-box" value="submit"> </div> </div>y mi JS es
const field = document.querySelector('textarea'); const backUp = field.getAttribute('placeholder') const btn = document.querySelector('.btn'); const clear = document.getElementById('clear') const submit = document.querySelector('#submit') // const comments = document.querySelector('#comment-box') const comments = document.getElementById('comment-box') field.onfocus = function(){ this.setAttribute('placeholder','') this.style.borderColor = '#333' btn.style.display = 'block' } // when clicking on this, placeholder changes into ' '. field.onblur = function(){ this.setAttribute('placeholder',backUp) } //click away, placeholder returns clear.onclick = function(){ btn.style.display = 'none'; field.value = ' ' submit.onclick = function(){ submit.style.display = 'none'; const content = document.createTextNode(field.value) comments.appendChild(content)¿Dónde me equivoco chicos? Cualquier comentario sería apreciado. Gracias
event.preventDefault(); para evitar que el formulario se envíe a otra página const field = document.querySelector('textarea'); const backUp = field.getAttribute('placeholder') const btn = document.querySelector('.btn'); const clear = document.getElementById('clear') const submit = document.querySelector('#submit') // const comments = document.querySelector('#comment-box') const comments = document.getElementById('comment-box'); // array to store the comments const comments_arr = []; // to generate html list based on comments array const display_comments = () => { let list = '<ul>'; comments_arr.forEach(comment => { list += `<li>${comment}</li>`; }) list += '</ul>'; comments.innerHTML = list; } clear.onclick = function(event){ event.preventDefault(); // reset the array comments_arr.length = 0; // re-genrate the comment html list display_comments(); } submit.onclick = function(event){ event.preventDefault(); const content = field.value; if(content.length > 0){ // if there is content // add the comment to the array comments_arr.push(content); // re-genrate the comment html list display_comments(); // reset the textArea content field.value = ''; } } <div class="container"> <h2>Leave us a comment</h2> <form> <textarea id="" placeholder="Add Your Comment" value=" "></textarea> <div class="btn"> <input id="submit" type="submit" value="Comment"> <button id="clear"> 🙏</button> </div> </form> </div> <div class="comments"> <h2>Comments</h2> <div id="comment-box"> </div> </div>