I'm currently in the process of developing a new website and experimenting with javascript, html, and css. However, I have encountered some issues that I am struggling to resolve.
One problem I am facing is that in my dropdown menu with the search bar, the list of searchable items automatically displays even when the search bar is not selected.
Additionally, I am trying to make an audio play when the counter increments, but the audio plays randomly upon loading the website. Furthermore, the audio does not play when clicking the increment button even though the PlaySound() function is correctly referenced through onclick on the button.
function search()
{
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("pgsearchbar").value;
filter = input.toUpperCase();
ul = document.getElementById("searchitems");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++)
{
finder = li[i].getElementsByTagName("a")[0];
letter = finder.textContent || finder.innerText;
if (letter.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = "";
}
else
{
li[i].style.display = "none";
}
}
}
let counter = 0;
function increment()
{
counter++;
document.querySelector("#counter").innerHTML = counter;
}
function PlaySound(soundObj)
{
document.getElementById(soundObj).play();
}
function reset()
{
document.querySelector("#counter").innerHTML = 0;
counter = 0;
}