Question

我正在学习JavaScript，并创建了这个非常简单的页面。它所要做的就是，单击Pikachu（图像）时，将播放音频文件。

类似地，如果我在表单中键入字符串“ Pikachu”，它会播放相同的声音，否则会显示“未找到”。

我有以下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;
}

单击图像效果很好，并播放该音频。但是当我以表格的形式输入“皮卡丘”时，它有时会播放声音，而其他时候则不会。

在网上搜索了很多之后，我找不到这种意外行为的原因。

任何人都可以帮助找到该错误吗？谢谢。

Answer 1

很难确定，因为您只能告诉我们“有时”有效，而“有时”无效。但是，罪魁祸首可能是您正在使用带有form按钮的submit（这是您未指定button属性时得到的默认类型type ）。提交form（由click按钮的submit自动触发）后，页面将被重定向，这将导致页面上的任何其他代码停止。在这种情况下，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">

在JavaScript中播放音频时出现异常行为

1 个答案: