Looking at the list items inside this div:
<div class="container">
<h2>Vanishing Act Game</h2>
<div>
<li class="list-group-item go" id="item">Door#1</li>
<li class="list-group-item go" id="item">Door#2</li>
<li class="list-group-item go" id="item">Door#3</li>
<li class="list-group-item go" id="item">Door#4</li>
<li class="list-group-item go" id="item">Door#5</li>
</div>
The idea is to have them disappear when "None" is typed into them. The JavaScript snippet for this is as follows:
<script type="text/javascript">
var TextInsideLi0 = document.querySelectorAll('li')[0].innerHTML; // Get text from line 1
var TextInsideLi1 = document.querySelectorAll('li')[1].innerHTML; // Get text from line 2
var TextInsideLi2 = document.querySelectorAll('li')[2].innerHTML; // Get text from line 3
var TextInsideLi3 = document.querySelectorAll('li')[3].innerHTML; // Get text from line 4
var TextInsideLi4 = document.querySelectorAll('li')[4].innerHTML; // Get text from line 5
var MenuItems = document.querySelectorAll('.go'); // Gets menu items with class 'go'
// Apply CSS to hide list item when "None" string is entered:
if (TextInsideLi0 == "None") {
MenuItems[0].classList.add('hidden')
} else if (TextInsideLi1 == "None") {
MenuItems[1].classList.add('hidden')
} else if (TextInsideLi2 == "None") {
MenuItems[2].classList.add('hidden')
} else if (TextInsideLi3 == "None") {
MenuItems[3].classList.add('hidden')
} else if (TextInsideLi4 == "None") {
MenuItems[4].classList.add('hidden')
}
</script>
This code currently works for 5 list items. I am seeking advice on implementing a for loop that can handle an unlimited number of list items while maintaining the same functionality.