当我尝试单击按钮时出现未捕获的DOMException问题

时间：2020-08-26 02:51:44

标签： javascript

我正在建造我的第一台鼓机，当我尝试编写代码以将eventListener添加到按钮上以单击时重现节拍时，我在devTools控制台中发现了此错误：

index.js:76 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.
      <span>I</span><span class="sound">CRASH</span>
    ' is not a valid selector.
at buttonAnimation (http://127.0.0.1:5500/index.js:76:31)
at HTMLButtonElement.<anonymous> (http://127.0.0.1:5500/index.js:6:5)

我不知道为什么会出现错误，因为当我用键弹奏节拍时，makeSound函数以及buttonAnimations都能很好地工作... 

// Detection Button Press
for (var i = 0; i < document.querySelectorAll(".beat").length; i++) {
  document.querySelectorAll(".beat")[i].addEventListener("click", function () {
    var buttonInnerHTML = this.innerHTML;
    makeSound(buttonInnerHTML);
    buttonAnimation(buttonInnerHTML);
  });
}
// Detection Keyboard Press
document.addEventListener("keydown", function (event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});
function makeSound(key) {
  switch (key) {
    case "q":
      var conga = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
      );
      conga.play();
      break;
    case "w":
      var hiHat = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/4[kb]cl_hihat.aif.mp3"
      );
      hiHat.play();
      break;
    case "e":
      var handClap = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/31[kb]handclap.aif.mp3"
      );
      handClap.play();
      break;
    case "r":
      var highTom = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/17[kb]hightom.aif.mp3"
      );
      highTom.play();
      break;
    case "t":
      var openHighHat = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/51[kb]open_hh.aif.mp3"
      );
      openHighHat.play();
      break;
    case "y":
      var snare = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/8[kb]snare.aif.mp3"
      );
      snare.play();
      break;
    case "u":
      var lowConga = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/16[kb]80s-LOWCONGA.aif.mp3"
      );
      lowConga.play();
      break;
    case "i":
      var crash = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/83[kb]80s-CRASH1.aif.mp3"
      );
      crash.play();
      break;
    case "o":
      var tamb = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/20[kb]80s-TAMB1.aif.mp3"
      );
      tamb.play();
      break;

    default:
  }
}

function buttonAnimation(currentKey) {
  var activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("playing");
  setTimeout(function () {
    activeButton.classList.remove("playing");
  }, 100);
}
body {
  font-family: "Righteous", cursive;
  text-align: center;
  background-color: rgb(43, 0, 43);
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-808 {
  width: 480px;
  background-color: #000;
  padding-top: 20px;
  border: 3px solid rgba(247, 161, 1, 0.575);
  border-radius: 20px;
}
.name-and-display-container {
  padding-left: 10px;
  border-right-width: 10px;
  padding-right: 10px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.name {
  color: rgb(240, 90, 36);
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
button {
  align-items: center;
}
button:focus {
  outline: none;
}
h1 {
  font-size: 25px;
  margin-right: 5px;
}
h3 {
  font-size: 15px;
}
.display {
  background-color: rgba(128, 128, 128, 0.192);
  border: 2px solid rgb(245, 245, 90);
  box-shadow: 0px 0px 3px yellow;
  border-radius: 5px;
  font-family: "Wallpoet", cursive;
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.beats-controler {
  font-size: 20px;
  color: rgb(255, 255, 126);
  text-shadow: 0px 0px 10px yellow;
}
.keys-container {
  padding-bottom: 20px;
  padding-right: 4px;
  padding-left: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.beat {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  margin-bottom: 8px;
  margin-right: 5px;
  transition: all 0.07s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.playing {
  transform: scale(1.1);
}
span {
  font-family: "Righteous", cursive;
  font-size: 25px;
}
.sound {
  font-size: 10px;
  margin-top: 5px;
}

.first-row {
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 72, 0, 1) 35%
  );
  border: rgba(255, 72, 0, 1);
  box-shadow: 0px 0px 5px rgba(255, 72, 0, 1);
}
.second-row {
  background: linear-gradient(
    180deg,
    rgba(255, 72, 0, 1) 0%,
    rgba(255, 102, 0, 1) 35%
  );
  border: rgba(255, 102, 0, 1);
  box-shadow: 0px 0px 5px rgba(255, 102, 0, 1);
}
.third-row {
  background: linear-gradient(
    180deg,
    rgba(255, 102, 0, 1) 0%,
    rgba(255, 184, 0, 1) 35%
  );
  border: rgba(255, 184, 0, 1);
  box-shadow: 0px 0px 5px rgba(255, 184, 0, 1);
}

@media (max-width: 510px) {
  .beat {
    width: 100px;
    height: 100px;
  }
  h1 {
    font-size: 15px;
    margin-right: 5px;
  }
  h3 {
    font-size: 10px;
    margin-right: 5px;
  }
}

@media (max-width: 500px) {
  .beat {
    width: 100px;
    height: 100px;
  }
  h1 {
    font-size: 15px;
    margin-right: 5px;
  }
  h3 {
    font-size: 10px;
    margin-right: 5px;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Wallpoet&display=swap"
      rel="stylesheet"
    />

    <title>BEATS MACHINE</title>
  </head>
  <body>
    <div class="container-808">
      <div class="name-and-display-container">
        <div class="display">
          <span class="beats-controler">120.BPM</span>
        </div>
        <div class="name">
          <h1>Rhythm Designer</h1>
          <h3>RD-808</h3>
        </div>
      </div>
      <div class="keys-container">
        <button class="q drum beat first-row">
          <span>Q</span><span class="sound">CONGA</span>
        </button>
        <button class="w drum beat first-row">
          <span>W</span><span class="sound">HI HAT</span>
        </button>
        <button class="e drum beat first-row">
          <span>E</span><span class="sound">HAND CLAP</span>
        </button>
        <button class="r drum beat second-row">
          <span>R</span><span class="sound">HIGH TOM</span>
        </button>
        <button class="t drum beat second-row">
          <span>T</span><span class="sound">OPEN HIGH HAT</span>
        </button>
        <button class="y drum beat second-row">
          <span>Y</span><span class="sound">SNARE</span>
        </button>
        <button class="u drum beat third-row">
          <span>U</span><span class="sound">LOW CONGA</span>
        </button>
        <button class="i drum beat third-row">
          <span>I</span><span class="sound">CRASH</span>
        </button>
        <button class="o drum beat third-row">
          <span>O</span><span class="sound">TAMB</span>
        </button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分：1)

这里的问题是，当您执行key时，您会将错误的makeSound传递给buttonAnimation和for loop。

for (var i = 0; i < document.querySelectorAll(".beat").length; i++) {
  document.querySelectorAll(".beat")[i].addEventListener("click", function () {

    // get the first currrent button's span innerHTML then lowercase 
    var key = this.querySelector("span").innerHTML.toLowerCase();

    makeSound(key);
    buttonAnimation(key);
  });
}

就像@charlietfl所建议的那样，最好像这样缓存按钮。

const buttons = document.querySelectorAll(".beat");
buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const key = button.querySelector("span").innerHTML.toLowerCase();
    makeSound(key);
    buttonAnimation(key);
  });
});


// Detection Button Press

for (var i = 0; i < document.querySelectorAll(".beat").length; i++) {
  document.querySelectorAll(".beat")[i].addEventListener("click", function() {
    var key = this.querySelector("span").innerHTML.toLowerCase();
    makeSound(key);
    buttonAnimation(key);
  });
}

// Detection Keyboard Press
document.addEventListener("keydown", function(event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

function makeSound(key) {
  switch (key) {
    case "q":
      var conga = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/22[kb]conga1.aif.mp3"
      );
      conga.play();
      break;
    case "w":
      var hiHat = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/4[kb]cl_hihat.aif.mp3"
      );
      hiHat.play();
      break;
    case "e":
      var handClap = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/31[kb]handclap.aif.mp3"
      );
      handClap.play();
      break;
    case "r":
      var highTom = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/17[kb]hightom.aif.mp3"
      );
      highTom.play();
      break;
    case "t":
      var openHighHat = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/51[kb]open_hh.aif.mp3"
      );
      openHighHat.play();
      break;
    case "y":
      var snare = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/808%20Basic/8[kb]snare.aif.mp3"
      );
      snare.play();
      break;
    case "u":
      var lowConga = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/16[kb]80s-LOWCONGA.aif.mp3"
      );
      lowConga.play();
      break;
    case "i":
      var crash = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/83[kb]80s-CRASH1.aif.mp3"
      );
      crash.play();
      break;
    case "o":
      var tamb = new Audio(
        "https://sampleswap.org/samples-ghost/DRUMS%20(FULL%20KITS)/DRUM%20MACHINES/80s%20Drum%20Machine/20[kb]80s-TAMB1.aif.mp3"
      );
      tamb.play();
      break;

    default:
  }
}

function buttonAnimation(currentKey) {
  var activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("playing");
  setTimeout(function() {
    activeButton.classList.remove("playing");
  }, 100);
}
body {
  font-family: "Righteous", cursive;
  text-align: center;
  background-color: rgb(43, 0, 43);
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.container-808 {
  width: 480px;
  background-color: #000;
  padding-top: 20px;
  border: 3px solid rgba(247, 161, 1, 0.575);
  border-radius: 20px;
}

.name-and-display-container {
  padding-left: 10px;
  border-right-width: 10px;
  padding-right: 10px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.name {
  color: rgb(240, 90, 36);
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

button {
  align-items: center;
}

button:focus {
  outline: none;
}

h1 {
  font-size: 25px;
  margin-right: 5px;
}

h3 {
  font-size: 15px;
}

.display {
  background-color: rgba(128, 128, 128, 0.192);
  border: 2px solid rgb(245, 245, 90);
  box-shadow: 0px 0px 3px yellow;
  border-radius: 5px;
  font-family: "Wallpoet", cursive;
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.beats-controler {
  font-size: 20px;
  color: rgb(255, 255, 126);
  text-shadow: 0px 0px 10px yellow;
}

.keys-container {
  padding-bottom: 20px;
  padding-right: 4px;
  padding-left: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.beat {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  margin-bottom: 8px;
  margin-right: 5px;
  transition: all 0.07s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.playing {
  transform: scale(1.1);
}

span {
  font-family: "Righteous", cursive;
  font-size: 25px;
}

.sound {
  font-size: 10px;
  margin-top: 5px;
}

.first-row {
  background: linear-gradient( 180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 72, 0, 1) 35%);
  border: rgba(255, 72, 0, 1);
  box-shadow: 0px 0px 5px rgba(255, 72, 0, 1);
}

.second-row {
  background: linear-gradient( 180deg, rgba(255, 72, 0, 1) 0%, rgba(255, 102, 0, 1) 35%);
  border: rgba(255, 102, 0, 1);
  box-shadow: 0px 0px 5px rgba(255, 102, 0, 1);
}

.third-row {
  background: linear-gradient( 180deg, rgba(255, 102, 0, 1) 0%, rgba(255, 184, 0, 1) 35%);
  border: rgba(255, 184, 0, 1);
  box-shadow: 0px 0px 5px rgba(255, 184, 0, 1);
}

@media (max-width: 510px) {
  .beat {
    width: 100px;
    height: 100px;
  }
  h1 {
    font-size: 15px;
    margin-right: 5px;
  }
  h3 {
    font-size: 10px;
    margin-right: 5px;
  }
}

@media (max-width: 500px) {
  .beat {
    width: 100px;
    height: 100px;
  }
  h1 {
    font-size: 15px;
    margin-right: 5px;
  }
  h3 {
    font-size: 10px;
    margin-right: 5px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Wallpoet&display=swap" rel="stylesheet" />

  <title>BEATS MACHINE</title>
</head>

<body>
  <div class="container-808">
    <div class="name-and-display-container">
      <div class="display">
        <span class="beats-controler">120.BPM</span>
      </div>
      <div class="name">
        <h1>Rhythm Designer</h1>
        <h3>RD-808</h3>
      </div>
    </div>
    <div class="keys-container">
      <button class="q drum beat first-row">
          <span>Q</span><span class="sound">CONGA</span>
        </button>
      <button class="w drum beat first-row">
          <span>W</span><span class="sound">HI HAT</span>
        </button>
      <button class="e drum beat first-row">
          <span>E</span><span class="sound">HAND CLAP</span>
        </button>
      <button class="r drum beat second-row">
          <span>R</span><span class="sound">HIGH TOM</span>
        </button>
      <button class="t drum beat second-row">
          <span>T</span><span class="sound">OPEN HIGH HAT</span>
        </button>
      <button class="y drum beat second-row">
          <span>Y</span><span class="sound">SNARE</span>
        </button>
      <button class="u drum beat third-row">
          <span>U</span><span class="sound">LOW CONGA</span>
        </button>
      <button class="i drum beat third-row">
          <span>I</span><span class="sound">CRASH</span>
        </button>
      <button class="o drum beat third-row">
          <span>O</span><span class="sound">TAMB</span>
        </button>
    </div>
  </div>
</body>

</html>

相关问题
最新问题