input field not resetting

Question

I'm doing a simple to do app in vanilla JavaScript where I'm trying to reset the input field after every click but for some reason it is not re-setting after every click.

it does reset after you click on the input field, but what I want is for the input field to reset after the clicking the "add" button and not having to click on input field.

the input field is not inside a <form>

this is my function to try to reset the input field

document.getElementById("task").onclick = function() {
  Reset();
}

function Reset() {
  document.getElementById("task").value = null;
}

<div class="row">
  <div class="col s12">

    <div class="input-field inline">

      <input id="task" type="text">

      <label for="email" data-error="wrong" data-success="right">Add a todo</label>

    </div>
    <a id="add" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>

  </div>
</div>

this is the problem now for some reason its affecting the localstorage:

function getTodos(){
    var todos = new Array();
    var todos_str = localStorage.getItem('todo');
    if(todos_str !== null) {
        todos = JSON.parse(todos_str);
    }
    return todos;
}
// Please do not use inline event handlers, use this instead:
document.getElementById("add").onclick = function() {
    Reset();
  }
  
  function Reset() {
    document.getElementById("task").value = null;
  }


function add(){
    var task = document.getElementById('task').value;

    var todos = getTodos();
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}

function remove() {
    var id = this.getAttribute('id');
    var todos = getTodos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));

    show();

    return false;
}

function show() {
    var todos = getTodos();

    var html = '<ul>';
    for(var i = 0; i < todos.length; i++) {
        html += '<li>' + todos[i] + '<button class="remove" id="' + i + '"> x </button></li>';
    };
    html += '</ul>';
    document.getElementById('todos').innerHTML = html;

    var buttons = document.getElementsByClassName('remove');
    for( var i = 0; i < buttons.length; i++){
        buttons[i].addEventListener('click', remove);
    };
}

document.getElementById('add').addEventListener('click', add);

show();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>to do app</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
            <div class="navbar-fixed">
              <nav>
                <div class="nav-wrapper">
                  <a href="#" class="brand-logo">Logo</a>
                  <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="sass.html">Sass</a></li>
                    <li><a href="badges.html">Components</a></li>
                    <li><a href="collapsible.html">JavaScript</a></li>
                  </ul>
                </div>
              </nav>
              </div>
                    

        <div class="row">
          <div class="col s12">
              
            <div class="input-field inline">
              
              <input class="reset-task" id="task"  type="text">
              
              <label for="email" data-error="wrong" data-success="right">Add a todo</label>
              
            </div>
            <a id="add" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>      
            
          </div>
        </div>

        <div id="todos"></div>


    <script src="app.js"></script>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

Are you sure your JavaScript invoked after the HTML has been parsed? — laruiss, Oct 09 '17 at 08:09
I made it a snippet, and it's actually working, could you provide a non-working example ? — Serge K., Oct 09 '17 at 08:09
That turns to be an invalid markup. As it is having duplicate IDs. — Jai, Oct 09 '17 at 08:09
@NathanP. it does reset after clicking on the input field but what I want its for the input field reset after a click and not having to click on the input field to reset — Fidel Castro, Oct 09 '17 at 08:12
Your code seems to work once we put it in a snippet - likely you needed to add the script to the end of the page where the form elements have rendered — mplungjan, Oct 09 '17 at 08:13
@FidelCastro so you want it to reset after any click on the page or after clicking a button? Please clarify! — Angelos Chalaris, Oct 09 '17 at 08:13
So why not wire up the add button instead of the task field ??? — mplungjan, Oct 09 '17 at 08:15

score 3 · Answer 1 · answered Oct 09 '17 at 08:14

3

Your example does work but you just used the wrong id. Use the add id instead of the task id and everything should work fine.

document.getElementById("add").onclick = function() {
  Reset();
}

function Reset() {
  document.getElementById("task").value = null;
}

<div class="row">
  <div class="col s12">

    <div class="input-field inline">

      <input id="task" type="text">

      <label for="email" data-error="wrong" data-success="right">Add a todo</label>

    </div>
    <a id="add" class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a>

  </div>
</div>

answered Oct 09 '17 at 08:14

Wouter Vandevelde

894
9
16

the issue with this solution is that it does reset the input field after every click but for some reason it is not adding the todos. :/ – Fidel Castro Oct 09 '17 at 08:20
Adding todos is something you didn't mention in your original question, I believe you should accept this answer if it solved your original issue and open a new thread for this since the original problem is solved. Also note that the snippet is sandboxed so localstorage won't work here. If you say 'it affects localstorage' we have no idea what the exact problem/error is. – Wouter Vandevelde Oct 09 '17 at 08:35

score 0 · Answer 2 · answered Oct 09 '17 at 08:24

Well, it's not clearly where you'd like to get the click event triggered, so I'm assuming that first option is on the body, so:

document.body.addEventListener("click", Rest);

Before your "document.getElementById("task").onclick" should help, there is just a little trick to get this working properly here: Why is the onclick event on the body element not working?

It's the something if what you like is getting it triggered on element a click event:

document.getElementById("add").onclick = function()......

input field not resetting

2 Answers2