Why does this javascript code that is supposed to only show results that match typed input filter on-CodePudding

I have a piece of code (only a snippet, everything else is css) that as I type shows only the options that match my typed input. But for some reason, it only filters the first 10 options. The rest of the options just show no matter what. Any ideas why?

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i  ) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

a { color: white }

<div >
  <div  style="background-color:#2D2D2D; color: white;">
    <h2>***PAVADINIMAS***</h2>
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Paieška" title="Type in a category">
    <ul id="myMenu">
      <li><a href="#">Option1</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">abcde</a></li>
      <li><a href="#">monday</a></li>
      <li><a href="#">tuesday</a></li>
      <li><a href="#">wednesday</a></li>
      <li><a href="#">thrusday</a></li>
      <li><a href="#">friday</a></li>
      <li><a href="#">saturday</a>
      <li>
      <li><a href="#">sunday</a></li>
      <li><a href="#">test2</a></li>
      <li><a href="#">iii</a></li>
      <li><a href="#">12345</a></li>
      <li><a href="#">qwerty</a></li>
    </ul>
  </div>

I searched the web but haven't found anything similar to this.

CodePudding user response：

Your extra <li> tag is rendered by the browser as an empty <li> element (i.e. <li></li>). Thus, when it is looped over by your for loop, the following lines fail:

a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {

because the empty li element doesn't contain an a element, and thus the a variable is undefined, causing a.innerHTML to throw an error (since you can't access a property on an undefined value).

CodePudding user response：

While it is valid to not have closing tags on </li> sometimes that can challenge code - one reason to never omit on things like <li>, <p> etc. that allow this Here I updated to use a closing tab on both those that did not have it.

Out of scope but I also updated the script to account for missing elements that returned undefined (missing the <a> for example

function myFunction() {
  let input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i  ) {
    let a = li[i].getElementsByTagName("a")[0];
    if (!!a && a.innerHTML != "" && a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

a { color: white }

<div >
  <div  style="background-color:#2D2D2D; color: white;">
    <h2>***PAVADINIMAS***</h2>
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Paieška" title="Type in a category">
    <ul id="myMenu">
      <li><a href="#">Option1</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">abcde</a></li>
      <li><a href="#">monday</a></li>
      <li><a href="#">tuesday</a></li>
      <li><a href="#">wednesday</a></li>
      <li><a href="#">thrusday</a></li>
      <li><a href="#">friday</a></li>
      <li><a href="#">saturday</a>
      </li><li></li>
      <li><a href="#">sunday</a></li>
      <li><a href="#">test2</a></li>
      <li><a href="#">iii</a></li>
      <li><a href="#">12345</a></li>
      <li><a href="#">qwerty</a></li>
    </ul>
  </div>