How do i make my reset function work on my input element?

Question

I have a reset function, which selects the id of an input.

I have a button which fires the function when clicked.

Where am I going wrong here? I thought maybe it was because my input was not in a form, and that i would need to create a form and give it an id to reference. But that didn't work either.

I also tried using document.getElementById.("reset").reset();

This didn't work either.

im lost!

function clearInputs(){
document.getElementById("reset").value = "";
}

     <div class="container">

    <div class="cell-1" id="centerElement">
        <div id="cell-1-nest-l"></div>
        <div id="cell-2-nest-l"></div>
        <div id="cell-3-nest-l"></div>
        <div id="cell-4-nest-l"><h3>your name</h3></div>
        <div id="cell-5-nest-l"></div>
        <div id="cell-6-nest-l"><input type="text" class="nameStyle1" id="nameInput1" class="reset"></div>

    <div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

    <div class="cell-3" id="centerElement" >
            <div id="cell-1-nest"></div>
            <div id="cell-2-nest"></div>
            <div id="cell-3-nest"><h3>their name</h3></div>
            <div id="cell-4-nest"></div>
            <div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2"></div>
            <div id="cell-6-nest"></div>


            </div>

    <div class="cell-4" id="result1">
        <input type="date" class="dateStyle1" id="dateInput1">
            </div>

    <div class="cell-5"><input type="button" value="Reset" onclick="clearInputs();"></div>

    <div class="cell-6" id="result2"> 
        <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">
            </div>
    <div class="cell-7"></div>

    <div class="cell-8"></div>

    <div class="cell-9"></div>

The "id" of the inputs are "nameInput1" and "nameInput1", not "reset". — martti d, Nov 20 '19 at 07:32
right but there is no form tag. Also, im actually not being clear in this question, but I want a button which will delete ALL my inputs. I have two date inputs and two text inputs. I was just trying to figure out how to at LEAST get the button working on a single element before I tackled a way to select all of them. — nineborn, Nov 20 '19 at 07:38
Just wrap all your code inside your form tag. it will not change anything. and use `` — Najam Us Saqib, Nov 20 '19 at 07:43
the thing is, my css is using the grid. So this particular input is in a nested grid item. Its in grid cell 1 of 9 cells. The thing is, I want to eventually select all the inputs (there are 4, two date inputs and two text inputs) and rest them using one button. SO an input type "reset" doesnt really work for me here, because it would only apply to one input. — nineborn, Nov 20 '19 at 07:47

T.J. Crowder · Accepted Answer · 2019-11-20T07:57:05.950

Before getting to your code: If you want to reset the fields of a form to their initial values, you don't need to write any code at all. Just use an input type="reset" in the form:

<input type="reset" value="Reset">

<form>
<div class="container">

        <div class="cell-1" id="centerElement">
            <div id="cell-1-nest-l"></div>
            <div id="cell-2-nest-l"></div>
            <div id="cell-3-nest-l"></div>
            <div id="cell-4-nest-l"><h3>your name</h3></div>
            <div id="cell-5-nest-l"></div>
            <div id="cell-6-nest-l"><input type="text" class="nameStyle1 reset" id="nameInput1"></div>
           
  </div>

        <div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

        <div class="cell-3" id="centerElement" >
                <div id="cell-1-nest"></div>
                <div id="cell-2-nest"></div>
                <div id="cell-3-nest"><h3>their name</h3></div>
                <div id="cell-4-nest"></div>
                <div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2"></div>
                <div id="cell-6-nest"></div>
                
            
                </div>

        <div class="cell-4" id="result1">
            <input type="date" class="dateStyle1" id="dateInput1">
                </div>
                
        <div class="cell-5"><input type="reset" value="Reset""></div>
                    
        <div class="cell-6" id="result2"> 
            <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">
                </div>
        <div class="cell-7"></div>

        <div class="cell-8"></div>

        <div class="cell-9"></div>
            

</div>
</form>

But re your code:

Your input's id is nameInput1, not reset (reset is its class). Either use that ID instead:

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

or use querySelector (if there will only ever be one) or querySelectorAll (if there will be more than one) with the class:

// If there will only ever be one
document.querySelector(".reset").value = "";

// If there will be more than one
document.querySelectorAll(".reset").forEach(function(input) {
    input.value = "";
});

If you're using that second option, you may need to polyfill forEach on older browsers; my answer here shows how.

Note that some of your elements have more than one class="" on them. You can't do that, all but the first one are ignored. If you want more than one class on an element, put all of the classes in a single class="" separated by spaces.

Here's an example of clearing multiple inputs, all with the class reset:

function clearInputs() {
    document.querySelectorAll(".reset").forEach(function(input) {
        input.value = "";
    });
}

 <div class="container">

<div class="cell-1" id="centerElement">
    <div id="cell-1-nest-l"></div>
    <div id="cell-2-nest-l"></div>
    <div id="cell-3-nest-l"></div>
    <div id="cell-4-nest-l"><h3>your name</h3></div>
    <div id="cell-5-nest-l"></div>
    <div id="cell-6-nest-l"><input type="text" class="nameStyle1 reset" id="nameInput1"></div>
<div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

<div class="cell-3" id="centerElement" >
        <div id="cell-1-nest"></div>
        <div id="cell-2-nest"></div>
        <div id="cell-3-nest"><h3>their name</h3></div>
        <div id="cell-4-nest"></div>
        <div id="cell-5-nest"><input type="text" class="nameStyle1 reset" id="nameInput2"></div>
        <div id="cell-6-nest"></div>


        </div>

<div class="cell-4" id="result1">
    <input type="date" class="dateStyle1 reset" id="dateInput1">
        </div>

<div class="cell-5"><input type="button" value="Reset" onclick="clearInputs();"></div>

<div class="cell-6" id="result2"> 
    <input type="date" class="dateStyle2 reset" id="dateInput2" placeholder="Their Bday">
        </div>
<div class="cell-7"></div>

<div class="cell-8"></div>

<div class="cell-9"></div>

thanks for this, I corrected that earlier but it still doesn't work! — nineborn, Nov 20 '19 at 07:39
im going to try and rewrite this using a queryselctor all because i actually want this to work on all my inputs. In my HTML i have two date inputs and two text inputs. — nineborn, Nov 20 '19 at 07:42
@nineborn - [Yes, it does work](https://jsfiddle.net/tjcrowder/7ngfecm9/1/). And if you want to do all your inputs, see the "if there will be more than one" part of the answer. — T.J. Crowder, Nov 20 '19 at 07:43
haha ok im sure it does, im just trying to figure out where im going wrong. Im going to use a querySelectorAll("#reset") and add a class of "reset" to the html of that element and test it. — nineborn, Nov 20 '19 at 07:44
@nineborn - One problem is that you have `class=""` in more than one place within a tag, which doesn't work. I've noted that in my answer and added a running example. — T.J. Crowder, Nov 20 '19 at 07:48
woops didnt finish reading your comment. Ok so i need to keep them multiple classes within the class tag. doh. Let me try this. — nineborn, Nov 20 '19 at 07:50
thank you this finally worked. Thing i dont understand is, why do I use a forEach on a querySelectorAll? I thought querySelectorAll would select all the elements, and then passing in the .value would be sufficient. Why is it not? Also i dont understand the (input) argument inside the forEach function. Would you mind clarifying all this for a newbie? Im trying to understand the thought process — nineborn, Nov 20 '19 at 08:01
Also, regarding the first part of your answer, regarding your advice to use a input type"reset" instead. Yes i realized that this would clear a form, but my inputs are #1 not in forms (should they be?) #2 they are in different grid cells (DIV's) in a grid container. Unless I'm missing something, and i can write a simple input type "reset" and assign it to all my inputs across the grid...then i figured i needed to write a function instead. — nineborn, Nov 20 '19 at 08:04
@nineborn - `querySelectorAll` returns a list of matching elements. That list doesn't have a `value` property, the DOM doesn't have a set-based API (like jQuery does, for instance). To set the value of each input in the list of matching elements, you have to loop through it. `forEach` does that, it calls the callback you give it repeatedly, once for each element in the list, passing the list in as the first argument. The callback above accepts that argument as the named parameter `input`. So each time it's called (once per element), `input` refers to a different input in the list. — T.J. Crowder, Nov 20 '19 at 08:06
@nineborn - Re `type="reset"`: You can wrap a `form` around the entire grid. The inputs being in different cells in the grid isn't a problem. If you do that, beware of a gotcha on the `button` element (`button`, **not** `input type="button"`). The default `type` of `button` elements is `submit`, so they'll try to submit the form if they're in a `form`. When using `button` just as a button, you need ` — T.J. Crowder, Nov 20 '19 at 08:07
thanks for clarifying. when i initially researched an answer for this, i swore i saw someone put a .value at the end of selecting an ID. Could you do the simple .value = "" at the end of other selectors? Say getElementById? — nineborn, Nov 20 '19 at 08:10
Also, what would do you think is better practice? Writing out the function we've built, or wrapping it in a form? — nineborn, Nov 20 '19 at 08:11
@nineborn - See the answer above, yes, you can use `.value` on the result of `getElementById` or `querySelector` because they return a **single** element (or `null` if none is found), not a list. `querySelectorAll`, `getElementsByTagName`, etc. return lists. I would use the reset functionality built into the browser rather than implementing it myself. Re best practices: It's not best practice touse `onclick` attributes and such. Use `addEventListener` or similar instead. Happy coding! — T.J. Crowder, Nov 20 '19 at 09:02

score 0 · Answer 2 · answered Nov 20 '19 at 07:39

document.getElementById("reset") searches for an element with id="reset" which does not seem to exist, which is why nothing gets reset.

If your <input> is in a <form> you can use <input type="reset"> to reset all form values (https://www.w3schools.com/tags/att_input_type_reset.asp)

You can try

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

and see that it would work on that specific element

score 0 · Answer 3 · edited Nov 20 '19 at 08:17

0

<div id="cell-6-nest-l">
  <input type="text" class="nameStyle1" id="nameInput1" class="reset">
</div>

here class is reset and you are using getElementById("reset") which is wrong.

Use one of following :

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

document.getElementByClass("reset").value = "";

edited Nov 20 '19 at 08:17

lczapski

4,026
3
16
32

answered Nov 20 '19 at 07:41

Abhijeet Talele

26
2

How do i make my reset function work on my input element?

3 Answers3