javascript - 尝试获取 span 元素的内部文本内容

Question

我正在尝试创建一个搜索栏，允许用户搜索一系列项目。我使用 span 元素作为过滤器，但由于某种原因，我无法将元素的内容分配给变量。

这是一个非常简单的设置。

我获取包装列表的类的内容，然后获取每个 span 元素。出于理智原因，我 console.log span 元素以确保它们被捕获(确实如此)。

然后，我尝试获取其中的文本内容并将其分配给 txtValue 变量，然后我将继续与过滤器进行比较检查。

我将其分配给文本值的部分是发生错误的地方，它似乎没有捕获内部文本。也许我的做法是错误的？

function search() {
  var input, filter, e, content, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  e = document.getElementById("search-list");
  content = e.getElementsByTagName("span");
  console.log(content);
  for (i = 0; i < content.length; i++) {
    if (content) {
      txtValue = content.innerHTML;
      console.log(textValue);
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        content[i].style.display = "";
      } else {
        content[i].style.display = "none";
      }
    }       
  }
}

<div class="search-bar">
  <input type="text" id="search" onkeyup="search()"placeholder="Search for numbers">
</div>

<div id="search-list">
  <span>1</span>
  <span>2</span>  
  <span>3</span>  
  <span>4</span>  
  <span>5</span>  
</div>

Answer 1

• content是一个节点列表，需要通过索引来访问节点
• 您在使用 textValue 的控制台中将变量定义为 txtValue

function search() {
  var input, filter, e, content, txtValue;
  input = document.getElementById("search");
  filter = input.value.toUpperCase();
  e = document.getElementById("search-list");
  content = e.getElementsByTagName("span");
  for (i = 0; i < content.length; i++) {
    if (content) {
      txtValue = content[i].innerHTML;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        content[i].style.display = "";
      } else {
        content[i].style.display = "none";
      }
    }       
  }
}

<div class="search-bar">
  <input type="text" id="search" onkeyup="search()"placeholder="Search for numbers">
</div>

<div id="search-list">
  <span>1</span>
  <span>2</span>  
  <span>3</span>  
  <span>4</span>  
  <span>5</span>  
</div>