这个javascript赢了'；从codepen导出时无法工作。代码必须在一个页面中全部运行
我从codepen获得了以下代码： 发生的事情是，我把它放在一个页面，但它不会运行。我试图理解它的错误，但它就像上面代码笔中的例子一样 以前在其他代码笔示例中也出现过这种情况，但我无法找出它不起作用的原因这个javascript赢了'；从codepen导出时无法工作。代码必须在一个页面中全部运行,javascript,json,Javascript,Json,我从codepen获得了以下代码： 发生的事情是，我把它放在一个页面，但它不会运行。我试图理解它的错误，但它就像上面代码笔中的例子一样 以前在其他代码笔示例中也出现过这种情况，但我无法找出它不起作用的原因 <html> <head> <style> #filter_users { width:100%; padding:10px;
<html>
<head>
<style>
#filter_users {
width:100%;
padding:10px;
}
#users-list {
margin:0;
padding:0;
}
#users-list li {
list-style:none;
padding:10px;
margin:5px 0;
border: 1px solid #e4e4e4;
}
</style>
<script>
var users = [
'Goku',
'Naruto',
'Ichigo',
'Flash',
'Batman',
'Sherlock Holmes',
'Khaleesi',
'Steve Fox'
];
ul = document.getElementById("users-list");
var render_lists = function(lists) {
var li = "";
for (index in lists) {
li += "<li>" + lists[index] + "</li>";
}
ul.innerHTML = li;
}
render_lists(users);
// lets filters it
input = document.getElementById('filter_users');
var filterUsers = function(event) {
keyword = input.value.toLowerCase();
filtered_users = users.filter(function(user) {
user = user.toLowerCase();
return user.indexOf(keyword) > -1;
});
render_lists(filtered_users);
}
input.addEventListener('keyup', filterUsers);
</script>
</head>
<body>
<input type="text" placeholder="Search Users" id="filter_users"/>
<ul id="users-list">
</ul>
</body>
</html>
#过滤用户{
宽度：100%；
填充：10px；
}
#用户列表{
保证金：0；
填充：0；
}
#用户列表li{
列表样式：无；
填充：10px；
保证金：5px0；
边框：1px实心#e4；
}
变量用户=[
“小悟空”，
“火影忍者”，
“一护”，
"闪光",，
“蝙蝠侠”，
“福尔摩斯”，
“Khaleesi”，
“史蒂夫·福克斯”
];
ul=document.getElementById（“用户列表”）；
var render_lists=函数（列表）{
var li=“”；
用于（列表中的索引）{
li+=“”+列出[索引]+“ ”；
}
ul.innerHTML=li；
}
呈现列表（用户）；
//让我们来过滤它
输入=document.getElementById（'filter_users'）；
var filterUsers=函数（事件）{
关键字=input.value.toLowerCase（）；
filtered\u users=users.filter（函数（用户）{
user=user.toLowerCase（）；
返回user.indexOf（关键字）>-1；
});
呈现用户列表（过滤用户）；
}
input.addEventListener（'keyup'，filterUsers）；
我希望它能像codepen一样工作。您必须将javascript代码放在文档正文的末尾。在呈现页面时，它还没有看到id users列表可见的元素。因此，将脚本放在文档末尾会有所帮助。对于更高级的方案，您可以考虑使用一种方法，该方法将等待文档加载，然后首先追加事件侦听器。见例
#过滤用户{
宽度：100%；
填充：10px；
}
#用户列表{
保证金：0；
填充：0；
}
#用户列表li{
列表样式：无；
填充：10px；
保证金：5px0；
边框：1px实心#e4；
}
变量用户=[
“小悟空”，
“火影忍者”，
“一护”，
"闪光",，
“蝙蝠侠”，
“福尔摩斯”，
“Khaleesi”，
“史蒂夫·福克斯”
];
ul=document.getElementById（“用户列表”）；
var render_lists=函数（列表）{
var li=“”；
用于（列表中的索引）{
li+=“”+列出[索引]+“ ”；
}
ul.innerHTML=li；
}
呈现列表（用户）；
//让我们来过滤它
输入=document.getElementById（'filter_users'）；
var filterUsers=函数（事件）{
关键字=input.value.toLowerCase（）；
filtered\u users=users.filter（函数（用户）{
user=user.toLowerCase（）；
返回user.indexOf（关键字）>-1；
});
呈现用户列表（过滤用户）；
}
input.addEventListener（'keyup'，filterUsers）；
脚本scriptsrcdeferscript