如何定义变量？

Question

//我不断收到typeError a，但未定义。 但是我试图在代码之上声明我的变量，但是它仍然不起作用。

  // Get input element
  let filter = document.getElementById('filter');
  // Add event listener
  filter.addEventListener('keyup', filterNames);



  function filterNames() {
    // Get value of input
    let filterValue = document.getElementById('filter').value.toUpperCase();

    // Get names ul
    let ul = document.getElementById('names');
    // Get lis from ul
    let li = ul.querySelectorAll('li.list-group-item');

    // Loop through collection-item lis
    for (let i = 0; i < li.length; i++) {

         let a = li[i].getElementsByTagName('a')[0];
        // If matched
        if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
            li[i].style.display = '';

        } else {
            li[i].style.display = 'none';
        }
    }

}

Answer 1

根据您的问题，我尝试复制相同的内容

HTML

<input type="text" id="filter" />


<ul id="names" class="list-group">
  <li class="list-group-item"><a>First item</a></li>
  <li class="list-group-item"><a>Second item</a></li>
  <li class="list-group-item"><a>Third item</a></li>
</ul>

JS：

// Get input element
  let filter = document.getElementById('filter');
  // Add event listener
  filter.addEventListener('keyup', filterNames);



  function filterNames() {
    // Get value of input
    let filterValue = document.getElementById('filter').value.toUpperCase();

    // Get names ul
    let ul = document.getElementById('names');
    // Get lis from ul
    let li = ul.querySelectorAll('li.list-group-item');

    // Loop through collection-item lis
    for (let i = 0; i < li.length; i++) {

         let a = li[i].getElementsByTagName('a')[0];
        // If matched
        if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
            li[i].style.display = '';

        } else {
            li[i].style.display = 'none';
        }
    }

}

如果在这一行没有抛出错误

let a = li[i].getElementsByTagName('a')[0];

因为没有

工作小提琴

Answer 2

最可能的原因是因为每个li内都没有a ，并且let a = li[i].getElementsByTagName('a')[0]; 你会变得undefined 。 因此，您最好添加支票以进一步处理，例如

for (let i = 0; i < li.length; i++) {

     let a = li[i].getElementsByTagName('a')[0];
    // If matched
    if (a && a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
        li[i].style.display = '';

    } else {
        li[i].style.display = 'none';
    }
}