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

Typeerror:miss two `}`. Also, what do you want to achieve? How could you `enter another comment ` — James, Mar 20 '22 at 15:00
It disappears because the form gets submitted. So, firstly you may wanna prevent it. See https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission — Shirshak55, Mar 20 '22 at 15:02
Yep. As @Shirshak55 says, since you have no database and it prints the comment but it also refresh the page and resets everything from start. — Rosan Paudel, Mar 20 '22 at 15:04
@james Basically anything you type in the text-area, once you click the submit button, whatever you entered, gets appended in the comment-box and when you enter another one it stores that one underneath the first one and so on — Peter Ly, Mar 20 '22 at 15:39
@PeterLy, ok, simple solution, replace your button from type=submit to type=button, the type=submit is being used to submit data to server, but your code seems pure client-side — James, Mar 20 '22 at 15:54
@James That is correct, no server/backend side, for this challenge, just front end — Peter Ly, Mar 20 '22 at 17:20

score 0 · Accepted Answer · answered Mar 20 '22 at 15:36

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>

thank you so much for the help. I can add my own styling to this now. Much appreciated — Peter Ly, Mar 20 '22 at 18:48

Creating comments and adding it into a comment box

1 Answers1