How can i make my variable defined?

Question

//I keep getting a typeError a is undefined. yet i tried to declare my a variable on top of my code but it still doesn't work.

  // 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

Based on your question I tried to replicate same

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';
        }
    }

}

if there is no its throwing error at this line

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

as there is no

working fiddle

Answer 2

Most probably the issue is because you don't have an a within your every li and as a result of let a = li[i].getElementsByTagName('a')[0]; you get undefined . So you better add a check to proceed further like

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';
    }
}