为什么 "this. "在我的.js文件中不起作用？

Question

我很困惑，因为我的.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.应该是红色的，但它不是，因此该功能不工作。

我在下面附上了一张截图

Answer 1

你有一个虚假的 ( 在你所有的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();
  }
})  

Answer 2

MDN： this 在处理程序中

通常需要引用事件处理程序被触发的元素，例如当对一组类似元素使用通用处理程序时。

如果将处理函数附加到一个元素上，使用 addEventListener()价值 this 内的处理程序是对该元素的引用。它与 currentTarget 属性，传递给处理程序的事件参数。

所以 var buttonInnerHTML = this.innerHTML; 是好的，但不能使用的原因是你的语法错误。这些 ( 在...面前 var audio =

这个错误在浏览器的控制台中应该是这样的错误。

Uncaught SyntaxError.Unexpected token 'var': 意外的标记'var'