How do you make the input value blank when you click the button?

Question

I am creating a comments section, but there is one problem: how do you make the input value blank when you click post?

<input type="text" value="" id="stuffed" />
<button onclick="post()">Post</button>

<script>
  function post(){
    var x = document.getElementById("stuffed").value;
    document.getElementById("paragraph").innerHTML = "&lt;me&gt; " + x;
  }
</script>
<p style="color: #ffffff;" id="paragraph"></p>

So that posts the comment (I'll use css to decorate it later), but where it says 'comment' still has the previously posted comment in it. How do you return the value of that to blank?

reset the form, no ? or `document.getElementById("stuffed").value=""` ? — Temani Afif, Mar 27 '18 at 21:08
**@whoever edited my code** Thank you for your help but it's not xHTML. But still Thanks — villager1, Apr 04 '18 at 23:45

score 1 · Answer 1 · answered Mar 27 '18 at 21:09

Simply add this line:

document.getElementById("stuffed").value = "";

Here a snippet of your code:

function post(){
  var x=document.getElementById("stuffed").value;
  document.getElementById("paragraph").innerHTML="&lt;me&gt; " + x;
  document.getElementById("stuffed").value = "";
}

<input type="text" aria-label="Comments" placeholder="Comments" value="" style="padding:10px 50px 10px 5px" id="stuffed"></input><button onclick="post()" style="text-decoration: none; color: #ffffff; background-color: #5dbbd4; padding: 12px 10px 12px 10px; border-width: 0px;">Post</button>

<p style="color: #ffffff;" id="paragraph"></p>

score 1 · Accepted Answer · answered Mar 27 '18 at 21:10

Well, just assign an empty value:

document.getElementById("stuffed").value = ''

function post() {
  var x = document.getElementById("stuffed").value;
  document.getElementById("paragraph").innerHTML += "<br>&lt;me&gt; " + x;
  
  document.getElementById("stuffed").value = ''
}

<input type="text" aria-label="Comments" placeholder="Comments" value="" style="padding:10px 50px 10px 5px" id="stuffed"></input><button onclick="post()" style="text-decoration: none; color: #ffffff; background-color: #5dbbd4; padding: 12px 10px 12px 10px; border-width: 0px;">Post</button>


<p style="color: #000;" id="paragraph"></p>

Adopt the function addEventListener to bind events to the elements.

document.getElementById('postbtn').addEventListener('click', post);

function post() {
  var input = document.getElementById("stuffed");
  var x = input.value;
  document.getElementById("paragraph").innerHTML += "<br>&lt;me&gt; " + x;

  input.value = '';
  input.focus();
}

<input type="text" aria-label="Comments" placeholder="Comments" value="" style="padding:10px 50px 10px 5px" id="stuffed"></input><button id="postbtn" style="text-decoration: none; color: #ffffff; background-color: #5dbbd4; padding: 12px 10px 12px 10px; border-width: 0px;">Post</button>


<p style="color: #000;" id="paragraph"></p>

score 1 · Answer 3 · answered Mar 27 '18 at 21:10

1

You have to set it's value back to what ever you want. In your case it's nothing so:

document.getElementById("mytext").value = "My value";

Make sure to execute this after your done with the data.

answered Mar 27 '18 at 21:10

MadeInDreams

1,991
5
33
64

How do you make the input value blank when you click the button?

3 Answers3