创建评论并将其添加到评论框中

Question

这里绝对是初级程序员。我正在尝试创建一个评论框，无论您在评论中键入什么，都将存储在另一个 div 中。我得到了一些它的工作，它能够附加但是，它立即消失了。我希望它将评论存储在#comment-box div 中，当您输入另一条评论时，它会将其存储在下方。到目前为止，这是我的代码

<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>

我的 JS 是

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)

伙计们，我哪里错了？对于任何反馈，我们都表示感谢。谢谢

Answer 1

您可以使用一个数组来存储评论，以及一个根据数组
在提交和清除时，您应该使用 event.preventDefault(); 来防止表单提交到另一个页面
提交并清除后，您可以操作数组并调用 html 生成函数来重新创建 commets-box 内容。

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>

创建评论并将其添加到评论框中

Creating comments and adding it into a comment box

javascript

html

comments