在Javascript中播放音频时的意外行为
在Javascript中播放音频时的意外行为
提问于 2018-09-12 04:40:30
我正在学习JavaScript，并创建了这个非常简单的页面。它所做的就是，当点击Pikachu(图像)时，播放一个音频文件。
类似地，如果我在表单中输入字符串"Pikachu“，它会播放相同的声音，否则会显示"not found”。
我有以下HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pokemon Cries</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="sounds.js"></script>
</head>
<body>
<form>
<input id="inputform" type="text" name="search">
<button onclick="getdata()">Search</button>
</form>
<img class="images" src="images/pikachu.png" alt="Pikachu" onclick="pikachusound()">
</body>
</html>我的JS是
var pikachu=new Audio("sounds/pikachu.mp3");
var inputstring;
function getdata()
{
inputstring=document.getElementById("inputform").value;
if(inputstring.toLowerCase()=="pikachu")
{
pikachusound();
}
else
{
alert("Not found");
}
}
function pikachusound()
{
pikachu.play();
}我的CSS是
body{
margin: 0;
padding: 0;
}
.images{
height: 150px;
width: 150px;
margin: 20px;
border-style: solid;
border-radius: 50%;
border-width: 5px;
border-color: grey;
}点击图像效果非常好，它会播放音频。但是当我在表单中输入"Pikachu“时，它有时会播放声音，有时则不会。
在网上搜索了很多次后，我找不到发生这种意外行为的原因。
有没有人能帮我找出这个bug？谢谢。
回答 1
Stack Overflow用户
发布于 2018-09-12 05:02:10
这很难确定，因为你只能告诉我们“有时”它有效，而“有时”它不起作用。但是，罪魁祸首之一可能是你正在使用一个带有submit按钮的form (这是你没有指定type属性时得到的默认类型的button )。当提交form (从submit按钮的click自动触发)时，页面将被重定向，这将导致页面上的任何其他代码停止。在这种情况下，getData()运行和form提交之间有点“赛跑”，哪一个获胜并不总是相同的。
我建议您不要在这里使用form，因为看起来您并没有真正在任何地方提交任何数据。
一般来说，您还使用了一些非常古老的编码技术，因此请查看下面的代码并注意注释。
var pikachu= new Audio("sounds/pikachu.mp3");
// Get a reference to the input element just once, not every time
// the function needs to run and don't set your variable to a property
// of the element, set it to the element itself. That way, if you
// ever decide that you want to access another property of the element
// you don't have to re-scan for it.
var inputElement = document.getElementById("inputform");
var imageElement = document.querySelector("img[alt='Pikachu']");
var buttonElement = document.querySelector("button[type='button']");
// Don't set up events in the HTML with inline event handlers like "onclick"
// Follow modern standards and do all your event binding in JavaScript
buttonElement.addEventListener("click", getdata);
imageElement.addEventListener("click", pikachusound);
// In JavaScript, it's a best practice to put the opening curly brace {
// on the same line as the structure it defines because under certain
// circumstances, the code will actually run differently than when the
// brace is on the next line down.
function getdata() {
if(inputElement.value.toLowerCase() == "pikachu") {
pikachusound();
} else {
alert("Not found");
}
}
function pikachusound(){
console.log("Sound playing!");
pikachu.play();
}body{
margin: 0;
padding: 0;
}
.images{
height: 150px;
width: 150px;
margin: 20px;
border: 5px solid grey;
border-radius: 50%;
}<input id="inputform" type="text" name="search">
<!-- To get a regular button, specify the type -->
<button type="button">Search</button>
<img class="images" src="images/pikachu.png" alt="Pikachu">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52283902
复制相关文章
相似问题