Question

我试图弄清楚为什么一个代码起作用，而另一个却不起作用。问题在于，在第一个代码中，该网站对任何键盘按键均无反应，而在最后一个代码中，它可以正常工作。鼠标单击在两种代码中均起作用。编码中的唯一区别是for语句的第一个区别。但是我认为此for语句仅适用于click事件，与键盘事件无关吗？

无效的代码：

for (var i = 0; 1 < document.querySelectorAll(".drum").length; i++) {

  document.querySelectorAll(".drum")[i].addEventListener("click", function() {

    var buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);


  });
}


document.addEventListener("keydown", function(event) {

  makeSound(event.key);


});

function makeSound(key) {

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

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

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

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

    case "j":
      var snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;

    case "k":
      var crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;

    case "l":
      var kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;

    default: console.log(key);

  }

}

有效的代码：

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {

  document.querySelectorAll(".drum")[i].addEventListener("click", function() {

    var buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);


  });

}

document.addEventListener("keydown", function(event) {

  makeSound(event.key);


});


function makeSound(key) {

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

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

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

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

    case "j":
      var snare = new Audio('sounds/snare.mp3');
      snare.play();
      break;

    case "k":
      var crash = new Audio('sounds/crash.mp3');
      crash.play();
      break;

    case "l":
      var kick = new Audio('sounds/kick-bass.mp3');
      kick.play();
      break;


    default: console.log(key);

  }
}

Answer 1

您在第一个代码块中的for循环不起作用，因为您正在将 1与document.querySelectorAll（“。drum”）。length 进行比较

for (var i = 0; 1 < document.querySelectorAll(".drum").length; i++) {
//Logic
}

应该是什么：

for (var i = 0; i < document.querySelectorAll(".drum").length; i++) {
//Logic
}

此外，我建议您使用let＆const代替var来声明变量。祝你好运！

为什么一种代码有效，而另一种无效？

1 个答案: