我的音频和搜索功能未按预期运行
Posted
技术标签:
【中文标题】我的音频和搜索功能未按预期运行【英文标题】：My audio and search features don't function as intended 【发布时间】：2020-08-23 02:18:36 【问题描述】：我正在创建一个快速网站并测试/试用 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" id="coin" enablejavascript="true">
</body>
</html>【问题讨论】：
【参考方案1】：音频的工作方式不同，因为您使用的是 <embed> 标签而不是 <audio> 标签
播放音频：
在按钮上添加's：
<button onclick="increment(); PlaySound('coin')" class="btn btn-primary">Increment</button>
在音频文件中，用音频标签替换
<audio src="coin.wav" autostart="false" id="coin" enablejavascript="true"></audio>
【讨论】：
以上是关于我的音频和搜索功能未按预期运行的主要内容，如果未能解决你的问题，请参考以下文章
如果在设定的时间内未按下键盘，您是否可以触发在谷歌应用程序脚本中运行的功能？