Creating comments and adding it into a comment box

Question

Absolute beginner programmer here. I'm trying to create a comments box where whatever you type in the comments, will be stored in another div. I got some of it to work, it was able to append however, it disappears straight after. I want it to store the comments in the #comment-box div and when you enter another comment it stores it underneath. Here is my code so far

<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">  
            &#128591;</button>
       </div> 
    </form>
</div>
<div class="comments">
    <h2>Comments</h2>
    <div id="comment-box" value="submit">
    </div>
</div>

and my JS is

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)

Where am I going wrong guys? Any feedback would be appreciated. Thank You

Answer 1

• you can use an array to store comments, and a function that generate html list of comments based on the array
• on submit and clear you should use event.preventDefault(); to prevent the form from submitting to another page
• on submit and clear you can manipulate the array and call the html generation function to recreate the commets-box content.

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">  
            &#128591;</button>
       </div> 
    </form>
</div>
<div class="comments">
   <h2>Comments</h2>
    <div id="comment-box">
    </div>
</div>