I'm making a quick website and testing/trying out javascript, html, and css, but I've run into a couple of errors that I can't figure out how to deal with.
In my dropdown menu with my search bar, the list of items that you can search show even when you're not selected onto the search.
I'm trying to get an audio to play when you increment the counter, but the audio randomly plays when you load the website. 2a) The audio doesn't play when you click the increment button even though the
PlaySound()function is referenced throughonclickwith 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;
}.pageselector
{
position:absolute;
bottom:10%;
left:45%;
}
.banner
{
background-image:url("sky.jpg");
padding:60px;
color:lightblue;
}
.banntxt
{
font-size:50px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family:"Faster One";
}
.navbar-brand
{
font-family:"Faster One";
font-size:25px;
}
li
{
margin:3px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<div>
<div class="banner">
<h1 class="banntxt">abcdefghijklmnop</h1>
</div>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<span class="navbar-brand mb-0 h1">ABC</span>
<h2 style="font-size:26px;">Contact us at: abcdefgh@gmail.com | ###-####-####</h2>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="navbaritems" class="navbar-nav">
<li class="nav-item active">
<button type="button" class="btn btn-info disabled">Home</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a>
</li>
<li>
<form class="form-inline">
<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
<ul id="searchitems">
<li>
<a href="index.html">Homepage</a>
</li>
<li>
<a href="#">About Me</a>
</li>
<li>
<a href="page2.html">Page2</a>
</li>
<li>
<a href="page3.html">Page3</a>
</li>
<li>
<a href="page3.html">Page4</a>
</li>
</ul>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
</div>
</nav>
</div>
<div class="card text-center" style="width:11rem; left:60px; bottom:-30px;">
<div class="card-body">
<h5 class="card-title">Counter</h5>
<p class="card-text" id="counter">0</p>
<button onclick="increment(); PlaySound(coin)" class="btn btn-primary">Increment</button>
<button onclick="reset()" class="btn btn-danger" style="margin:5px">Reset</button>
</div>
</div>
<div style="position:absolute; bottom:10%; left:48.04%;">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<embed src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
</body>
</html>