Question

我正在使用vanilla JavaScript做一个简单的应用程序，我试图在每次点击后重置输入字段，但由于某种原因，每次点击后都没有重新设置。

单击输入字段后它会重置，但我想要的是在点击“添加”按钮后重置输入字段，而不必点击输入字段。

输入字段不在<form>

中

这是我尝试重置输入字段的功能

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>

现在出于某种原因这是影响本地存储的问题：

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>

Answer 1

您的示例确实有效但您刚使用了错误的ID。使用add id而不是task id，一切都应该可以正常工作。

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>

Answer 2

好吧，你不清楚你想要触发点击事件的位置，所以我假设第一个选项是在身体上，所以：

document.body.addEventListener（“click”，Rest）;

在你的“document.getElementById（”task“）。onclick”之前“应该有所帮助，这里有一个小技巧可以让它正常工作： Why is the onclick event on the body element not working?

如果您喜欢的是在点击事件元素上触发它，那就是这样的事情：

document.getElementById（“add”）。onclick = function（）......

输入字段未重置

2 个答案: