Tips for updating a portion of your code using new variables in JavaScript

Question

Tips for updating a portion of your code using new variables in JavaScript

I'm currently working on implementing a commenting feature for my website. The goal is to display new comments above the existing comment section when users submit their feedback. However, I'm facing challenges in dynamically updating the HTML with the new comments using JavaScript. My aim is to maintain consistency in the formatting of the new comment compared to the initial comments displayed. How can I achieve this? Apologies if my explanation is not clear enough :/

var post= document.getElementById("post");
post.addEventListener("click",function(e){
    e.preventDefault();
    console.log('comment button pressed');

    var userComment=document.getElementById("comment-box").value;
    console.log(userComment)

    var text= document.createTextNode(userComment);
    console.log(text)

    var newComment = document.getElementById("new-comment");
    console.log(newComment)

    newComment.appendChild(userComment)
    


})

  .comment-box,
  .post-comment .list{
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 2px black;
  }

.comment-section{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-comment .list{
  width: 100%;
  margin-bottom: 12px;
}

.post-comment .list .user{
  display: flex;
  padding: 8px;
  overflow: hidden;
}

.post-comment .list .user img{
  height: 38px;
  width: 38px;
  margin-right: 10px;
  border-radius: 50%;  
}

.comment-section .name{
  text-transform: uppercase;
}

.post-comment .list .day{
  font-size: 12px;
}

.post-comment{
  padding: 0 0 15px 58px
}




#comment-box{
  border:none;
  border-radius: 5px;
}


.comment-box .user{
  display: flex;
  width: min-content;
}

.comment-box .image img{
  width:24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
}

.comment-box textarea{
  height: 50px;
  width: 1 ;
  background-color: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px black;
}

<div class="post-comment">
          <div class="list">
            <div class="user">
              <div class="user-image"><img src="./images/ok.webp"></div>
              <div class="user-name">
                <div class="name">TOM</div>
                <div class="day">100 days ago</div>
              </div>
            </div>
            <div class="comment">LOREM IPSUN DABUN VUB</div>
          </div>
          <div id="new-comment">  </div>

          <div class="comment-box">
            <div class="user">
              <div class="user-image"><img src="./images/OK.webp"></div>
              <form>
              <textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
              <button id="post">Comment</button>
            </form>
          </div>

        </div>
      </div>
     </div>

javascript html css

Answer 1

Answer №1

You're so close! The key is to pass a node when using the appendChild() method.

Start by creating a div node,

// create an element node
// var text = document.createTextNode(userComment);
var text = document.createElement('div');
text.innerText = userComment;

Then, add it to the new comment section,

// note: you need to pass a node to appendChild() method
// newComment.appendChild(userComment);
newComment.appendChild(text);

Hope this explanation helps!

var post= document.getElementById("post");
post.addEventListener("click",function(e){
    e.preventDefault();
    console.log('coment button pressed');

    var userComment = document.getElementById("comment-box").value;
    console.log(userComment)

    // create an element node
    // var text = document.createTextNode(userComment);
    var text = document.createElement('div');
    text.innerText = userComment;
    console.log(text)

    var newComment = document.getElementById("new-comment");
    console.log(newComment)

    // note: you need to pass a node to appendChild() method
    // newComment.appendChild(userComment);
    newComment.appendChild(text);
})

.comment-box,
.post-comment .list{
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 2px black;
}

.comment-section{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-comment .list{
  width: 100%;
  margin-bottom: 12px;
}

.post-comment .list .user{
  display: flex;
  padding: 8px;
  overflow: hidden;
}

.post-comment .list .user img{
  height: 38px;
  width: 38px;
  margin-right: 10px;
  border-radius: 50%;  
}

.comment-section .name{
  text-transform: uppercase;
}

.post-comment .list .day{
  font-size: 12px;
}

.post-comment{
  padding: 0 0 15px 58px
}




#comment-box{
  border:none;
  border-radius: 5px;
}


.comment-box .user{
  display: flex;
  width: min-content;
}

.comment-box .image img{
  width:24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
}

.comment-box textarea{
  height: 50px;
  width: 1 ;
  background-color: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px black;
}

<div class="post-comment">
    <div class="list">
      <div class="user">
        <div class="user-image"><img src="./images/ok.webp"></div>
        <div class="user-name">
          <div class="name">TOM</div>
          <div class="day">100 days ago</div>
        </div>
      </div>
      <div class="comment">LOREM IPSUN DABUN VUB</div>
    </div>
    
    <div id="new-comment"></div>

    <div class="comment-box">
      <div class="user">
        <div class="user-image"><img src="./images/OK.webp"></div>
        <form>
        <textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
        <button id="post">Comment</button>
      </form>
    </div>

  </div>
</div>

Answer 2

You're so close! The key is to pass a node when using the appendChild() method.

Start by creating a div node,

// create an element node
// var text = document.createTextNode(userComment);
var text = document.createElement('div');
text.innerText = userComment;

Then, add it to the new comment section,

// note: you need to pass a node to appendChild() method
// newComment.appendChild(userComment);
newComment.appendChild(text);

Hope this explanation helps!

var post= document.getElementById("post");
post.addEventListener("click",function(e){
    e.preventDefault();
    console.log('coment button pressed');

    var userComment = document.getElementById("comment-box").value;
    console.log(userComment)

    // create an element node
    // var text = document.createTextNode(userComment);
    var text = document.createElement('div');
    text.innerText = userComment;
    console.log(text)

    var newComment = document.getElementById("new-comment");
    console.log(newComment)

    // note: you need to pass a node to appendChild() method
    // newComment.appendChild(userComment);
    newComment.appendChild(text);
})

.comment-box,
.post-comment .list{
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 2px black;
}

.comment-section{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-comment .list{
  width: 100%;
  margin-bottom: 12px;
}

.post-comment .list .user{
  display: flex;
  padding: 8px;
  overflow: hidden;
}

.post-comment .list .user img{
  height: 38px;
  width: 38px;
  margin-right: 10px;
  border-radius: 50%;  
}

.comment-section .name{
  text-transform: uppercase;
}

.post-comment .list .day{
  font-size: 12px;
}

.post-comment{
  padding: 0 0 15px 58px
}




#comment-box{
  border:none;
  border-radius: 5px;
}


.comment-box .user{
  display: flex;
  width: min-content;
}

.comment-box .image img{
  width:24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
}

.comment-box textarea{
  height: 50px;
  width: 1 ;
  background-color: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px black;
}

<div class="post-comment">
    <div class="list">
      <div class="user">
        <div class="user-image"><img src="./images/ok.webp"></div>
        <div class="user-name">
          <div class="name">TOM</div>
          <div class="day">100 days ago</div>
        </div>
      </div>
      <div class="comment">LOREM IPSUN DABUN VUB</div>
    </div>
    
    <div id="new-comment"></div>

    <div class="comment-box">
      <div class="user">
        <div class="user-image"><img src="./images/OK.webp"></div>
        <form>
        <textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
        <button id="post">Comment</button>
      </form>
    </div>

  </div>
</div>

Answer 3

Answer №2

You need to make a change in the code snippet from

newComment.appendChild(userComment)

to newComment.appendChild(text);. Furthermore, I have made some additional modifications such as clearing the text area after submitting a comment and displaying each comment in a separate paragraph to avoid them appearing on the same line:

var post= document.getElementById("post");
post.addEventListener("click",function(e){
    e.preventDefault();

    var userComment=document.getElementById("comment-box").value;
    
    var text= document.createElement('p');;
    text.innerHTML = userComment;

    var newComment = document.getElementById("new-comment");

    newComment.appendChild(text);
    document.getElementById("comment-box").value = "";
   
})

  .comment-box,
  .post-comment .list{
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 2px black;
  }

.comment-section{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-comment .list{
  width: 100%;
  margin-bottom: 12px;
}

.post-comment .list .user{
  display: flex;
  padding: 8px;
  overflow: hidden;
}

.post-comment .list .user img{
  height: 38px;
  width: 38px;
  margin-right: 10px;
  border-radius: 50%;  
}

.comment-section .name{
  text-transform: uppercase;
}

.post-comment .list .day{
  font-size: 12px;
}

.post-comment{
  padding: 0 0 15px 58px
}




#comment-box{
  border:none;
  border-radius: 5px;
}


.comment-box .user{
  display: flex;
  width: min-content;
}

.comment-box .image img{
  width:24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
}

.comment-box textarea{
  height: 50px;
  width: 1 ;
  background-color: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px black;
}

<div class="post-comment">
          <div class="list">
            <div class="user">
              <div class="user-image"><img src="./images/ok.webp"></div>
              <div class="user-name">
                <div class="name">TOM</div>
                <div class="day">100 days ago</div>
              </div>
            </div>
            <div class="comment">LOREM IPSUN DABUN VUB</div>
          </div>
          <div id="new-comment"></div>

          <div class="comment-box">
            <div class="user">
              <div class="user-image"><img src="./images/OK.webp"></div>
              <form>
              <textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
              <button id="post">Comment</button>
            </form>
          </div>

        </div>
      </div>
     </div>

Answer 4

You need to make a change in the code snippet from

newComment.appendChild(userComment)

to newComment.appendChild(text);. Furthermore, I have made some additional modifications such as clearing the text area after submitting a comment and displaying each comment in a separate paragraph to avoid them appearing on the same line:

var post= document.getElementById("post");
post.addEventListener("click",function(e){
    e.preventDefault();

    var userComment=document.getElementById("comment-box").value;
    
    var text= document.createElement('p');;
    text.innerHTML = userComment;

    var newComment = document.getElementById("new-comment");

    newComment.appendChild(text);
    document.getElementById("comment-box").value = "";
   
})

  .comment-box,
  .post-comment .list{
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 2px black;
  }

.comment-section{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.post-comment .list{
  width: 100%;
  margin-bottom: 12px;
}

.post-comment .list .user{
  display: flex;
  padding: 8px;
  overflow: hidden;
}

.post-comment .list .user img{
  height: 38px;
  width: 38px;
  margin-right: 10px;
  border-radius: 50%;  
}

.comment-section .name{
  text-transform: uppercase;
}

.post-comment .list .day{
  font-size: 12px;
}

.post-comment{
  padding: 0 0 15px 58px
}




#comment-box{
  border:none;
  border-radius: 5px;
}


.comment-box .user{
  display: flex;
  width: min-content;
}

.comment-box .image img{
  width:24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
}

.comment-box textarea{
  height: 50px;
  width: 1 ;
  background-color: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px black;
}

<div class="post-comment">
          <div class="list">
            <div class="user">
              <div class="user-image"><img src="./images/ok.webp"></div>
              <div class="user-name">
                <div class="name">TOM</div>
                <div class="day">100 days ago</div>
              </div>
            </div>
            <div class="comment">LOREM IPSUN DABUN VUB</div>
          </div>
          <div id="new-comment"></div>

          <div class="comment-box">
            <div class="user">
              <div class="user-image"><img src="./images/OK.webp"></div>
              <form>
              <textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
              <button id="post">Comment</button>
            </form>
          </div>

        </div>
      </div>
     </div>

Tips for updating a portion of your code using new variables in JavaScript

Answer №1

Answer №2

Similar questions

Is my HTML <h1> text not updating properly? I'm wondering if I linked app.js correctly

Trouble viewing Three.js content in Index.html

Having trouble implementing server-side rendering with Styled-Components in Next JS

Merge two scripts together

Deactivate certain input elements when a specific radio option is chosen

Position an image at the center within a footer widget

The term "landscape" to address the issue of adjusting the Android app screen to display in landscape orientation is not being acknowledged

What occurs to the node request stream before it is utilized?

Error on the main thread in NativeScript Angular for Android has not been caught

Individual files dedicated to each controller in Angular.js are a common practice in development

Creating a clickable map for a PNG image: Step-by-step tutorial

Getting around popup blockers on safari

"Is it possible to access variables declared in the main app.js file from separate route files in Node.js Express 2.5.5 and if so

Guide to putting a new track at the start of a jPlayer playlist

The Typescript compiler is unable to locate the module './lib'

Is it necessary to bring in CSS for the following page?

JavaScript: void(0), Internet Explorer 6, and SWFAddress are all important components

Issue with three.js memory leak due to malfunctioning .dispose() method or incorrect usage

Waiting for all promises to resolve: A step-by-step guide

Split-screen homepage design (CSS)