如何从文本字段中获取用户输入并将其显示在网页上？

Question

I'm learning how to code js and one of my goals is to have a pseudo commenting system on my webpage. I'm wondering how to make javascript that can make it so that the user can type a comment and it'll display on the webpage. I've tried using getelementbyclassname but because I'm a beginner I don't really know what I'm doing. HTML:

<div class="commentform">
             <h1>Leave your comment!</h1>
             <br>
             <br>
             <form class="commentform" method="post">
                 <p>Nickname or Name</p> <input id="name" required="required" type="text">
                 <br>
                 <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea>
                 <button type="button" name="commentsubmit">Comment!</button>
            </form>
</div>

Answer 1

So you want the comment to pop up when the user submits the form. A problem I noticed about your code is that <button type="button" name="commentsubmit">Comment!</button> doesn't actually submit the form - it should have type="submit" .

Also, you don't specify where on the webpage you want the comment to be placed, so I'll assume it's some div, I'll use <div id="target"></div> but it could be anything.

First: triggering JS when the form is submitted

You can use the .addEventListener function to call a function when the form is submitted. It seems like you are having some trouble selecting the form though. One way is to use document.querySelector , which is more versatile than getElementsByClassName , since you have more than one element with the same class name. We want to select a form with class commentform , which can be represented as form.commentform (look familiar? this is also a CSS selector.).

document.querySelector("form.commentform").addEventListener("submit", function(event) {

});

This selects the form, and adds a listener that triggers a function when the form is submitted. We can place code inside of this function body.

Second: putting the comment on the page

We'll need to retrieve the comment first. The comment is in a textarea with id="comment" - perfect, we can use document.getElementById("comment") to select it. Then, we can call .value on the textarea to retrieve its contents.

document.getElementById("comment").value

Then, we can set the contents of the <div id="target"></div> to the comment. This can be done the same way as we retrieved the textarea, except we use .innerText instead of .value .

document.getElementById("target").innerText = document.getElementById("comment").value;

This now sets the text of the target div to equal the comment that was entered. If you also want the page to not refresh when the user submits the form, you'll want to put event.preventDefault(); in the function as well, to tell the browser to prevent the default behavior of submitting a form (refreshing the page).

 document.querySelector("form.commentform").addEventListener("submit", function(event) { event.preventDefault(); document.getElementById("target").innerText = document.getElementById("comment").value; });

 <div class="commentform"> <h1>Leave your comment:</h1> <br> <br> <form class="commentform" method="post"> <p>Nickname or Name</p> <input id="name" required="required" type="text"> <br> <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea> <button type="submit" name="commentsubmit">Comment!</button> </form> </div> <div id="target"></div>

If you also want to display the nickname, the steps are similar. I'll leave that as an exercise for you.

Answer 2

All what you need to do is to add a script tag and within it make a function where you can get the value of what your're typing within the text field, add the onclick to the button so that you invoke the function.

<div class="commentform">
             <h1>Leave your comment!</h1>
             <br>
             <br>
             <form class="commentform" method="post">
                 <p>Nickname or Name</p> <input id="name" required="required" type="text">
                 <br>
                 <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea>
                 <button onclick='getText()' type="button" value="hello" name="commentsubmit">Comment!</button>
            </form>
  <p id = 'demo'> </p>
</div>
<script>
  function getText (){
  var x = document.getElementById("comment").value
   document.getElementById("demo").innerHTML = "You commment is : " + x;
  console.log(x)
}
</script>

Answer 3

You can do something like this....

 const handleComment = (e)=>{ e.preventDefault(); const newDiv = document.createElement("div"); newDiv.innerText = e.target.comments.value; const comments = document.getElementById("comments") comments.append(newDiv) } const form = document.getElementById("commentForm") form.addEventListener("submit", handleComment, true);

 <div id="comments"></div> <div class="commentform"> <h1>Leave your comment:</h1> <br> <br> <form id="commentForm" class="commentform" > <p>Nickname or Name</p> <input id="name" required="required" type="text"> <br> <p>Comments: </p><textarea id="comment" name="comments" rows="8" cols="20"></textarea> <button type="submit" name="commentsubmit">Comment!</button> </form> </div>

What I did was added an event listener to the form that captures the submit event.

I then took the comment text and used innerText to add it to a dynamically created div (using document.createElement).

Finally I appended the div to another div I created and gave an Id of comments. (inside the HTML)