时间戳

首页 > 解决方案 > 向 JS 中的 onClick 事件添加声音？

javascript - 向 JS 中的 onClick 事件添加声音？

问题描述

请原谅我的英语不好，因为这是我在这里的第一个问题，基本上我正在尝试通过 onClick 事件向按钮添加声音，但不确定我哪里出错了，一​​双新的眼睛/解释会非常有帮助！这是我的html： 

````<button onClick="handleClick()" class="w drum">w</button>
<button onClick="handleClick()" class="a drum">a</button>
<button onClick="handleClick()" class="s drum">s</button>
<button onClick="handleClick()" class="d drum">d</button>
<button onClick="handleClick()" class="j drum">j</button>
<button onClick="handleClick()" class="k drum">k</button>
<button onClick="handleClick()" class="l drum">l</button`

JS

function handleClick() { 

 var buttonInnerHTML = this.innerHTML;

switch (buttonInnerHTML) {
case "w":
    var tom1 = new Audio("tom-1.mp3");
tom1.play();
    break;

case "a":
    var tom2 = new Audio("tom-2.mp3");
tom2.play();
    break;

case "s":
    var tom3 = new Audio("tom-3.mp3");
tom3.play();
    break;

case "d":
    var tom4 = new Audio("tom-4.mp3");
tom4.play();
    break;

case "j":
    var crash = new Audio("crash.mp3");
crash.play();
    break;      

    case "k":
    var kick = new Audio("kick.mp3");
kick.play();
    break;      

    case "l":
    var snare = new Audio("snare.mp3");
snare.play();
    break;  


default:                


} 

}

标签： javascripthtmlonclickfrontend

解决方案

您没有以正确的方式获得单击按钮的内容。您可以将事件传递给函数并按如下方式使用它：

var buttonInnerHTML = event.target.innerHTML;

例子：

function handleClick(event) { 
     var buttonInnerHTML = event.target.innerHTML;
     console.log(buttonInnerHTML);
}
<button onClick="handleClick(event)" class="w drum">w</button>
<button onClick="handleClick(event)" class="a drum">a</button>
<button onClick="handleClick(event)" class="s drum">s</button>
<button onClick="handleClick(event)" class="d drum">d</button>
<button onClick="handleClick(event)" class="j drum">j</button>
<button onClick="handleClick(event)" class="k drum">k</button>
<button onClick="handleClick(event)" class="l drum">l</button>

推荐阅读