Using id to get li elements from two ul lists

Question

First up, I'm a total noob with Javascript, no doubt. This Javascript is for a search list and filtering items out of that list, It works pretty well, but only for one of the ul lists (the first one) in the code.

So the question is, how do I get it to work for both ul lists. I've tried renaming id s for the second list and posting the script again with changed id s and so on, but nothing really seems to work. Thank you in advance, I am really stuck and don't know what to try next.

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name.."> <ul id="myUL"> <li><a class="volcanion-unb">Volcanion (UNB)</a></li> <li><a class="centiskorch-vmax">Centiskorch Vmax</a></li> <li><a class="centiskorch-v">Centiskorch V</a></li> </ul> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name.."> <ul id="myUL"> <li><a class="volcanion-unb2">Volcanion (UNB)</a></li> <li><a class="centiskorch-vmax2">Centiskorch Vmax</a></li> <li><a class="centiskorch-v2">Centiskorch V</a></li> </ul> <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> </body> </html>

Answer 1

The reason your code is only working for the first list has to do with this line:

  ul = document.getElementById("myUL");

The getElementById method will only return one element, so it is completely ignoring the second element with the same id . (More information on getElementById here ) It is generally a "best practice" to use an id only once per html page.

In order to get around this, you could give the other ul a different id (let's say <ul id="myUL2"> ). However, I think it would be much more efficient to get all the li s at once, as you originally intended. You should be able to simply to skip assigning ul altogether and do this:

li = document.getElementsByTagName('li');

This will grab the li elements from the whole document , for you to then manipulate as desired. ( More information on getElementsByTagName here )

Here is that solution inserted into your original code:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name..">
<ul id="myUL">
  <li><a class="volcanion-unb">Volcanion (UNB)</a></li>
  <li><a class="centiskorch-vmax">Centiskorch Vmax</a></li>
  <li><a class="centiskorch-v">Centiskorch V</a></li>
</ul>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Name..">
<ul id="myUL2">
  <li><a class="volcanion-unb2">Volcanion (UNB)</a></li>
  <li><a class="centiskorch-vmax2">Centiskorch Vmax</a></li>
  <li><a class="centiskorch-v2">Centiskorch V</a></li>
</ul>
     
<script>
    function myFunction() {
      // Declare variables
      var input, filter, li, a, i, txtValue;
      input = document.getElementById('myInput');
      filter = input.value.toUpperCase();
      li = document.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>