个人中心
gpt4 book ai didi

javascript - 播放Java音频时出现意外行为

转载 作者：行者123 更新时间：2023-12-02 23:31:37 25 4
gpt4 key购买 nike

enter image description here

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

同样，如果我在表单中键入字符串“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;
}

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

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

谁能帮忙找到错误？谢谢。

最佳答案

很难确定，因为您只能告诉我们“有时”它有效，而“有时”它无效。但是，罪魁祸首可能是您使用的是带有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 - 播放Java音频时出现意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52283902/

25 4 0
文章推荐： elasticsearch - 使用ELK查找丢失的日志
文章推荐： 文本数组到电子邮件正文
文章推荐： powershell - 在 Visual Studio 2005 中使用 NuGet
文章推荐： Elasticsearch - 按指标聚合排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com