<script>
// get input element
let filterInput = getElementById('filterInput');
// add event listenter
filterInput.addEventLister('keyup', filterNames);
function filterNames(){
console.log(1);
}
</script>
标记没有被IDE着色,当我运行它时它不起作用。是原子吗?或者它是我能解决的问题。
答案 0 :(得分:1)
您已关闭标记中的<input>
标记。在HTML中,<input>
标记没有结束标记。你也无法嵌套<li>
(我注意到你已经完成了)
另外,改变:
let filterInput = getElementById('filterInput');
到
let filterInput = document.getElementById('filterinput');
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<title>My Contacts</title>
</head>
<body>
<div class="container">
<h1 class="center-align">
My contacts
</h1>
<input type="text" id="filterinput" placeholder="Search Names">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>A</h5>
</li>
<li class="collection-item">
<a href="#">Abe</a>
<a href="#">Adam</a>
<a href="#">Alan</a>
<a href="#">Anna</a>
<li class="collection-header">
<h5>B</h5>
</li>
<li class="collection-item">
<a href="#">Beth</a>
<a href="#">Beth</a>
<a href="#">Bill</a>
<a href="#">Bob</a>
<li class="collection-header">
<h5>C</h5>
</li>
<li class="collection-item">
<a href="#">Carry</a>
<a href="#">Cortany</a>
<a href="#">Crapy</a>
<a href="#">Cheese</a>
</li>
</ul>
</div>
<script>
// get input element
let filterInput = document.getElementById('filterinput');
// add event listenter
filterInput.addEventLister('keyup', filterNames);
function filterNames() {
console.log(1);
}
</script>
</body>
</html>