我很困惑,因为我的.js文件无法读取。this.innerHTML
我找不到答案?
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
for (var i = 0; i < numberOfDrumButtons; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
var buttonInnerHTML = this.innerHTML;
switch (buttonInnerHTML) {
case "w":
(var audio = new Audio("sounds/tom-1.mp3"); audio.play();
break;
case "a":
(var audio = new Audio("sounds/tom-2.mp3"); audio.play();
break;
case "s":
(var audio = new Audio("sounds/tom-3.mp3"); audio.play();
break;
case "d":
(var audio = new Audio("sounds/tom-4.mp3"); audio.play();
break;
case "j":
(var audio = new Audio("sounds/snare.mp3"); audio.play();
break;
case "k":
(var audio = new Audio("sounds/crash.mp3"); audio.play();
break;
case "l":
(var audio = new Audio("sounds/kick-bass.mp3"); audio.play();
break;
default: console.log(buttonInnerHTML);
}
});
}
据我所知,this.应该是红色的,但它不是,因此该功能不工作。
我在下面附上了一张截图
你有一个虚假的 (
在你所有的var音频前。
如果你按F12,你会看到控制台错误。
通常情况下,this.innerHTMLm应该可以工作,因为你在eventListener中使用的是函数。
但你得到 document.querySelectorAll(".drum")
在每次迭代中--这不是最佳的
授权更干净
我假设所有的鼓都在一个ID=drumContainer的静态容器中。
const drums = {
"w": "sounds/tom-1.mp3",
"a": "sounds/tom-2.mp3",
"s": "sounds/tom-3.mp3",
"d": "sounds/tom-4.mp3",
"j": "sounds/snare.mp3",
"k": "sounds/crash.mp3",
"l": "sounds/kick-bass.mp3"
};
document.getElementById("drumContainer").addEventListener("click", e => {
const tgt = e.target;
if (tgt.classList.contains("drum")) {
const audio = new Audio(drums[tgt.textContent]);
audio.play();
}
})
通常需要引用事件处理程序被触发的元素,例如当对一组类似元素使用通用处理程序时。
如果将处理函数附加到一个元素上,使用
addEventListener()
价值this
内的处理程序是对该元素的引用。它与currentTarget
属性,传递给处理程序的事件参数。
所以 var buttonInnerHTML = this.innerHTML;
是好的,但不能使用的原因是你的语法错误。这些 (
在...面前 var audio =
这个错误在浏览器的控制台中应该是这样的错误。
Uncaught SyntaxError.Unexpected token 'var': 意外的标记'var'