如何解决我的音频和搜索功能无法正常使用
我正在建立一个快速的网站并测试/试用javascript，html和css，但是遇到了两个错误，我不知道该如何处理。
-
在带有搜索栏的下拉菜单中，即使未选择搜索项，仍会显示可搜索的项目列表。
-
我正在尝试在增加计数器时播放音频，但是在加载网站时会随机播放音频。 2a）即使您通过
PlaySound()通过按钮引用了onclick功能，单击了增量按钮也不会播放音频。
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>解决方法
音频的工作方式有所不同，因为您有一个<embed>标签而不是<audio>标签
播放音频：
在按钮上添加的：
<button onclick="increment(); PlaySound('coin')" class="btn btn-primary">Increment</button>
并在音频文件中，替换为音频标签
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。