Unable to reset an input Text field using Vanilla Javascript

Question

I am trying to reset an input field using Java Script and it does not work in the way I intend to. I am trying to undestand why it works in a certain way and not in another way. Could you please explain why and provide any pointers if possible. Thank you.

Input text field I am trying to reset:

<input type="text" id="textInput" class="inp">

I defined a button like this:

<button id="resetButton">Reset</button>

I created an event listener on the reset button and used it like below.

var rButton=document.getElementById("resetButton");

rButton.addEventListener("click", function() {
    var inputTextValue=document.getElementById("textInput").value;
    inputTextValue="";
});

This is the JS code I am getting the value from the input text:

 var inputTextValue=document.getElementById("textInput").value;

And to reset the value, I am just assigning it to empty string:

inputTextValue="";

This piece of code doesn't work but when I try to get the reference of the input text like this -

var inputText=document.getElementById("textInput");

and try to reset the value like this, it works -

inputText.value="";

So, I am trying to understand, what is the difference in both ways and what am I doing wrong.

You need to directly set the .value property to "".

Pointy
– Pointy

2018-10-04 20:08:47 +00:00
Commented Oct 4, 2018 at 20:08 — Pointy
– Pointy, Commented Oct 4, 2018 at 20:08
You're essentially doing a get when you want to do a set

j08691
– j08691

2018-10-04 20:10:45 +00:00
Commented Oct 4, 2018 at 20:10 — j08691
– j08691, Commented Oct 4, 2018 at 20:10

tymeJV · Accepted Answer · 2018-10-04 20:10:35Z

4

When you assign the value property to a variable, that's exactly what you're doing. You're simply assigning the value, not creating a reference - either set the entire element to the variable and update the value property, or just update the value property at once:

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

Or:

var input = document.getElementById("textInput");
input.value = "";

answered Oct 4, 2018 at 20:10

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahesh Over a year ago

Thank you for your reply! Your first sentence makes sense. This could be marked as a correct answer, but since I do not have enough reputation, I couldn't do so.

user10243107 · Accepted Answer · 2018-10-04 20:10:42Z

2

You are copying the current value of your input field into the inputTextValue string and then you replace that copy with an empty string. That means you are not actually altering your input field.

Try

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

or

 var input = document.getElementById("textInput");
 input.value = "";

instead.

answered Oct 4, 2018 at 20:10

user10243107

1 Comment

Mahesh Over a year ago

Understood. Thanks for your helpful inputs!

Mert Aşan · Accepted Answer · 2018-10-04 20:18:19Z

1

This way you can reset or select.

$(document).on("click", "#resetButton", function() {
    var textInputValue = $("#textInput").val(); // get value
    $("#textInput").val(""); // or reset value
});

or

var input = document.getElementById("textInput");
var resetButton = document.getElementById("resetButton");

resetButton.addEventListener("click", function() {
    input.val(); // get value
    input.val(""); // or reset value
});

Edit: I haven't seen the Javascript tag. Sorry. :)

edited Oct 4, 2018 at 20:18

answered Oct 4, 2018 at 20:12

Mert Aşan

4551 gold badge10 silver badges19 bronze badges

1 Comment

Mahesh Over a year ago

Thank for the solution, but I am not using jQuery! Thanks for the solution though!

Collectives™ on Stack Overflow

Unable to reset an input Text field using Vanilla Javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related