-1
나는 모든 클릭 후 입력 필드를 재설정하려고하지만 몇 번의 이유 때문에 모든 클릭 후 재설정되지 않는 바닐라 자바 스크립트에서 간단한 작업을 수행하고 있습니다.입력 필드가 재설정되지 않습니다
입력란을 클릭하면 재설정되지만 입력란을 클릭하지 않고 입력란을 '재설정'버튼을 클릭하면 재설정 할 수 있습니다.
입력 필드는 <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>
는 당신이 반드시 HTML 후에 호출 자바 스크립트 구문 분석 된 항목입니다. 요소에 클릭 이벤트를 트리거? – laruiss
나는 이것을 발췌 문장으로 만들었고 실제로 작동하고있다. 작동하지 않는 예제를 제공 할 수 있을까? –
잘못된 마크 업으로 변합니다. ID가 중복되어 있습니다. – Jai