为什么这个。”在我的 .js 文件中不起作用？答案

【问题标题】：Why "this." is not working in my .js file?为什么这个。”在我的 .js 文件中不起作用？
【发布时间】：2020-05-14 11:07:08
【问题描述】：

我很困惑，因为我的 .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);

                        }


                      });

                  }

据我所知。应该是红色的，但不是，因此该功能不起作用。

我在下面附上了截图

【问题讨论】：

截图丢失
这里没有截图。请也发布你的代码
你可以按 F12 并检查控制台错误
任何错误被抛出？
请添加代码而不是截图

标签： javascript this

【解决方案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();
  }
})

【讨论】：

【解决方案2】：

MDN: The value of this within the handler

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

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

所以var buttonInnerHTML = this.innerHTML; 很好，但它不起作用的原因是你的语法错误。 var audio =前面的那些(

这个错误应该在浏览器的控制台中显示为如下错误：

Uncaught SyntaxError: Unexpected token 'var'

【讨论】：