Javascript :TypeError: input.value 未定义答案

【问题标题】：Javasript :TypeError: input.value is undefinedJavascript :TypeError: input.value 未定义
【发布时间】：2020-07-30 12:22:02
【问题描述】：

我需要根据用户的表单输入过滤li。尝试实现类似 YouTube 的搜索栏，以显示标题与用户输入匹配的视频。使用 JS 将输入值分配给我得到错误未定义值的变量。谁能告诉我这里的错误是什么？

<div id="content">
  <nav>
    <form id="search" onkeyup="filter()" class="form-inline">
      <input 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>

function filter() {
  var filterValue, input, ul, li, p, i;
  input = document.getElementById("search");
  filterValue = input.value.toUpperCase();
  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";
    }
  }
}

【问题讨论】：

id search 的元素是表单元素而不是输入元素
是的，否则这个问题不再有意义，可能会被否决（另外，你的答案不能被接受）。我正在恢复您所做的编辑。（它甚至一开始就不应该被批准。）

标签： javascript html forms input

【解决方案1】：

给输入元素添加一个id

<input id="search-text" class="form-control mr-sm-2" type="text" placeholder="Search">

您正在尝试获取不具有您期望值的表单元素。所以它未定义。这就是为什么您需要从搜索输入元素中获取搜索文本。

还有一个 id 的错字：'List'。正如您在 html 中提到的那样，它应该“列出”（用小写字母）

function filter() {
  var filterValue, input, ul, li, p, i;
  input = document.getElementById("search-text");
  filterValue = input.value.toUpperCase();
  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";
    }
  }
}

<div id="content">
  <nav>
    <form id="search" onkeyup="filter()" class="form-inline">
      <input id="search-text" 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>

【讨论】：

【解决方案2】：

下面的代码对我来说很好用！

function filter(field) {
  var filterValue, input, ul, li, p, i;
  filterValue = field.value.toUpperCase();
  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";
    }
  }
}

    <div id="content">
  <nav>
    <form id="search"  class="form-inline">
      <input class="form-control mr-sm-2" type="text" onkeyup="filter(this)" 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>

【讨论】：