输入字段未重置

我正在用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>

您的示例确实有效，但您只是使用了错误的 id。使用添加 ID 而不是任务 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>

好吧，目前尚不清楚您希望在哪里触发点击事件，因此我假设第一个选项在正文上，因此：

document.body.addEventListener（"click"， Rest）;

在您的"document.getElementById（"task"）.onclick"应该有所帮助之前，这里有一个小技巧可以让它正常工作：为什么正文元素上的 onclick 事件不起作用？

如果您喜欢在元素 a 单击事件上触发它，那就是它：

document.getElementById（"add"）.onclick = function（）......

相关内容

最新更新

热门标签：