Javascript 30 "Ударная установка" console.log Выпуск

Question

Я делаю JavaScript 30, и у меня есть проблема с началом JavaScript Drum Kit. Я точно следовал коду, но у меня, похоже, проблема с первыми несколькими строками JavaScript в программе. Мне это нужно для console.log <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>, но я продолжаю получать "ноль", когда я открываю консоль и нажимаю клавишу вместо <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio>это моя проблема.

Вот мой код:

HTML (пропущены нерелевантные части):

              <div class="keys">
              <div data-key="65" class="key">
                  <kbd>A</kbd>
                  <span class="sound">Fired</span>
              </div>
              <div data-key="83" class="key">
                  <kbd>S</kbd>
                  <span class="sound">Long</span>
              </div>
              <div data-key="68" class="key">
                  <kbd>D</kbd>
                  <span class="sound">Quick</span>
              </div>
              <div data-key="70" class="key">
                  <kbd>F</kbd>
                  <span class="sound">Wet</span>
              </div>
              <div data-key="71" class="key">
                  <kbd>G</kbd>
                  <span class="sound">Messy</span>
              </div>
              <div data-key="72" class="key">
                  <kbd>H</kbd>
                  <span class="sound">Screech</span>
              </div>
              <div data-key="74" class="key">
                  <kbd>J</kbd>
                  <span class="sound">b0ss</span>
              </div>
              <div data-key="75" class="key">
                  <kbd>K</kbd>
                  <span class="sound">Splat</span>
              </div>
              <div data-key="76" class="key">
                  <kbd>L</kbd>
                  <span class="sound">Quack</span>
              </div>
       </div>

       <audio data-key="65" src="/sounds/fired.wav"></audio> 
       <audio data-key="83" src="/sounds/long.wav"></audio> 
       <audio data-key="68" src="/sounds/quick_one.wav"></audio> 
       <audio data-key="70" src="/sounds/wet_burst.wav"></audio> 
       <audio data-key="71" src="/sounds/messy.wav"></audio>
       <audio data-key="72" src="/sounds/screecher.wav"></audio> 
       <audio data-key="74" src="/sounds/ey_b0ss.wav"></audio> 
       <audio data-key="75" src="/sounds/splat.wav"></audio> 
       <audio data-key="76" src="/sounds/quack.wav"></audio> 

JavaScript:

   <script>
          window.addEventListener('keydown', function(e) {
          const audio = document.querySelector('audio[data- 
          key="${e.keyCode}"]');
          console.log(audio);
         });
   </script>

Если кто-нибудь может помочь мне сделать это войти <audio data-key="(number)" src="/sounds/(name-of-sound.wav)</audio> вместо "ноль" я был бы очень признателен.

PS: я использую текстовый редактор Google Chrome и Brackets, если это помогает.

Answer 1

У вас есть ключи в элементе div, а не в элементе audio.

Так должно быть что-то вроде:

     window.addEventListener('keydown', function(e) {
       let selector = `div[data-key='${e.keyCode}']`;
       let audio = document.querySelector(selector);
       console.log(audio);
     });

Также будьте осторожны с кавычками: если вы хотите интерполировать переменные в него, вам нужно использовать эти наклонные одинарные кавычки (ES6).

Надеюсь, это поможет!