JavaScript报错TypeError: input.value未定义，求搜索过滤问题排查

我一眼就发现了两个导致错误的核心问题，咱们一步步来修复：

1. 错误获取输入框元素 #

你现在用document.getElementById("search")拿到的是整个<form>表单，而不是里面的输入框！form元素本身没有value属性，这就是为什么会触发input.value is undefined的报错。

解决办法：给input元素添加一个专属id（比如searchInput），通过这个id直接定位输入框；或者通过form的elements属性找到内部的input控件。

2. ID大小写不匹配导致列表获取失败 #

你的ul标签id是list（小写L），但JS代码里写的是document.getElementById("List")（大写L），这会让ul变量变成null，后续的元素操作自然也会出错。

修正后的完整代码 #

HTML部分（给输入框添加id）

<div id="content"> 
<nav> 
<form id="search" onkeyup="filter()" class="form-inline"> 
<!-- 给input添加id：searchInput -->
<input id="searchInput" class="form-control mr-sm-2" type="text" placeholder="Search"> 
<button class="btn" type="submit"><i class="fa fa-search"></i></button> 
</form> 
</nav> 
<div class="video-section-1"> 
<ul id="list" class="row"> 
<li class="column col-sm-3"> 
<div class="card"> 
<video src="./Videos/Sorry, Apple THIS is the First Laptop with Mini-LED.mp4" type="video/mp4"></video> 
<p style="padding:5px;">Sorry, Apple THIS is the First Laptop with Mini-LED</p> 
</div> 
</li> 
<li class="column col-sm-3"> 
<div class="card"> 
<video src="./Videos/r&b.mp4" type="video/mp4"></video> 
<p style="padding:5px;">R & B -Beatpop</p> 
</div> 
</li> 
</ul> 
</div>

JS部分（修正元素定位和ID大小写）

function filter() { 
var filterValue, input, ul, li, p, i; 
// 获取正确的输入框元素
input = document.getElementById("searchInput"); 
filterValue = input.value.toUpperCase(); 
// 修正ul的ID大小写：list（小写L）
ul = document.getElementById("list"); 
li = ul.getElementsByTagName("li"); 
for (i = 0; i < li.length; i++) { 
p = li[i].getElementsByTagName("p")[0]; 
if (p.innerHTML.toUpperCase().indexOf(filterValue) > -1) { 
li[i].style.display = ""; 
} else { 
li[i].style.display = "none"; 
} 
} 
}

额外优化小建议 #

• 尽量避免使用内联事件（比如onkeyup="filter()"），可以用addEventListener绑定事件，代码结构更清晰，也便于后续维护。
• 给视频标题的p标签加个类名（比如video-title），这样获取标题元素时不用依赖getElementsByTagName("p")[0]，可靠性更高。

内容的提问来源于stack exchange，提问作者Om Venugopal