搜索/筛选函数javascript不起作用

我想修改我在W3school上看到的代码，该代码将生成一个过滤器/搜索函数。 原始代码是

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

函数myFunction（）{
//声明变量
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（'myInput'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（'li'）；
//循环浏览所有列表项，并隐藏与搜索查询不匹配的项
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

下面的代码旨在将输入与锚元素的数据标题属性进行比较，但它不起作用。有人能指出哪里出了问题吗？非常感谢

function search() {   
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('search-input');
  filter = input.value.toUpperCase();
  ul = document.getElementById('search-opt');
  li = ul.getElementsByTagName('li');
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0].getAttribute('data-caption');
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

函数搜索（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（'search-input'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（'search-opt'）；
li=ul.getElementsByTagName（'li'）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

试着删除

.getAttribute（'data-caption'）

，可能会有帮助，因为W3Schools在他们的代码中没有使用它。

Ahoj，虽然我认为我可以看到问题并帮你解决，但这个问题对其他人没有多大帮助。我建议您进行更多的分析，提出更具体的问题，而不是“这段代码不起作用”。将其分解为几个步骤，对涉及的变量进行一些调试打印输出，并尝试找出代码的哪一部分没有达到您的预期：）很抱歉，也许我没有清楚地说明，实际上我知道我的代码（getAttribute（'data-caption'）有什么问题，但我不知道如何修复它。我理解你的意图，不只是给出答案，或者你能给我一些提示如何解决它吗？

a

是什么？“a”元素。现在它是一个属性。橡皮鸭想指出，元素的行为不像属性，它们没有相同的属性。谢谢！你的暗示确实有用！感谢您的回答，但我希望搜索函数将输入与锚元素的数据标题进行比较，这就是我添加getAttribute方法的原因。我可以知道为什么这种添加会导致函数停止运行吗？