I am trying to dynamically add an ID called "myMenu" using JavaScript to a ul element for a search filter. Unfortunately, I am unable to directly access the ul tag to change it, so I need to do it via JavaScript. As I am new to JavaScript, I am looking to switch from targeting elements by class to specifically target the ul element.
<div class="main-menu">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
function myFunction() {
// Declare variables
var input, filter, ul, li;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
// Loop through all list items, and hide those who don't match the search query
for (let i = 0; i < li.length; i++) {
if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}