为什么我的classList不向HTML元素添加类？

Question

我正在尝试向我的分区元素添加一个'playing'类，以便当'keydown'由'kbd'元素指定的指定键上时，具有其属性的'playing'类将应用于'kbd'元素。

没有发生这种情况。我不断收到这个错误：null不是一个对象（评估'key.classList'）。

<style> 
    .container { 
     margin - top: 40 px; 
     margin - left: 260 px; 
    } 
    .key { 
     border: 1 px solid black; 
     border - radius: 5 px; 
     width: 100 px; 
     padding: 1 rem.5 rem; 
     margin: 1 rem; 
     text - align: center; 
     color: black; 
     adds shadow to Text. text - shadow { 
     hor position, vert position, color of the font - size: 1.5 rem; 
     background: rgba(255, 255, 255, 0.4); 
     - webkit - transition: all 0.07 s; 
     display: inline - block; 
     } 
     kbd { 
     display: block; 
     font - size: 17 px; 
     font - family: Heiti SC; 
     } 
     ; 
     span { 
     font - family: Heiti SC; 
     } 
     ; 
     .keys { 
     min - height: 100 vh; 
     align - items: center; 
     justify - content: center; 
     } 
     ; 
     .playing { 
     -webkit - transform: scale(1.1); 
     border - color: #ffc600; 
     box - shadow: 0 0 10 px# ffc600; 
     } 
     ; 
</style> 

这里是我的html代码

<div class = "container "> 
    <!-- all kbb elemtns must be inline with each other with padding between them.  --> 
    <div class = "keys"> 
     <!-- place border around keys --> 
     <div data-key = "65" class = "key"> 
     <kbd class = "">a</kbd> 
     <span class = "sound">Clap</span> 
     </div> 
     <div data-key = "83" class = "key"> 
     <kbd class = "">S</kbd> 
     <span class = "sound">HiHat</span> 
     </div> 
     <div data-key = "68" class = "key"> 
     <kbd class = "">d</kbd> 
     <span class = "sound">base</span> 
     </div> 
     <div data-key = "70" class = "key"> 
     <kbd class = "">f</kbd> 
     <span class = "sound">OpenHat</span> 
     </div> 
     <div data-key = "71" class = "key"> 
     <kbd class = "">G</kbd> 
     <span class = "sound">boom</span> 
     </div> 
     <!--   specifies an approach to embedding audio inside the web 
     audio element : 

      controls attribute : adds audio controls : play, pause, and volume 

      <source> element allows specification of alternative audio files which the browser may choose from. 

       --> 
    </div> 
</div> 
<!-- Use data-* attribute to embed custom data --> 
<audio data-key = "65" src = "sounds/clap.wav"></audio> 
<audio data-key = "83" src = "sounds/hihat.wav"></audio> 
<audio data-key = "68" src = "sounds/kick.wav"></audio> 
<audio data-key = "70" src = "sounds/openhat.wav"></audio> 
<audio data-key = "71" src = "sounds/boom.wav"></audio> 

这里是我的JavaScript

window.addEventListener('keydown', function(e) { 
    // Is there an audio element on the page that has a data-key of '65' ? 

    // Use an attr selector 
    // Use eS6 template strings contained is double quotes 
    // This gets the correspoding audio element for that specific key 
    const audio = document.querySelector(`audio[data-key = "${e.keyCode}"]`); 
    if (!audio) return; 

    /* The time between start and finish for the audio element is too long so use the currentTime property 
    to make the audio rewind to the beginning instantly once the keydown event happens.*/ 
    audio.currentTime = 0; // rewind to the beginning. 

    // Select a corresponding key 
    const key = document.querySelector(`key[data-key = "${e.keyCode}"]`); 
    // add a class of playing to the key class 
    key.classList.add('playing'); 
    audio.play() 
}); 

Answer 1

在document.querySelector('key[data-key="${e.keyCode}"]') - key被指定为元素，当你没有与一个元素在你的HTML名称。

它适用于div和.key - 我只是将其更改为div.key以更具体。

看看下面的这段代码，它可以解决你的问题。检查if(key)以避免任何错误。

window.addEventListener('keydown', function(e) { 
 
    // Is there an audio element on the page that has a data-key of '65' ? 
 

 
    // Use an attr selector 
 
    // Use eS6 template strings contained is double quotes 
 
    // This gets the correspoding audio element for that specific key 
 
    const audio = document.querySelector(`audio[data-key = "${e.keyCode}"]`); 
 
    if (!audio) return; 
 

 
    /* The time between start and finish for the audio element is too long so use the currentTime property 
 
    to make the audio rewind to the beginning instantly once the keydown event happens.*/ 
 
    audio.currentTime = 0; // rewind to the beginning. 
 
    // Select a corresponding key 
 
    const key = document.querySelector(`div.key[data-key = "${e.keyCode}"]`); 
 
    if(key){ 
 
     console.log('Key is: ' + e.keyCode); 
 
     // add a class of playing to the key class 
 
     key.classList.add('playing'); 
 
     audio.play() 
 
    } 
 
});

.container { 
 
     margin-top: 40px; 
 
     margin-left: 260px; 
 
    } 
 
    .key { 
 
     border: 1px solid black; 
 
     border-radius: 5px; 
 
     width: 100px; 
 
     padding: 1rem .5rem; 
 
     margin: 1rem; 
 
     text-align: center; 
 
     color: black; 
 
     } 
 
    kbd { 
 
     display: block; 
 
     font-size: 17 px; 
 
     font-family: Heiti SC; 
 
     } 
 
     span { 
 
     font-family: Heiti SC; 
 
     } 
 
     .keys { 
 
     min-height: 100 vh; 
 
     align-items: center; 
 
     justify-content: center; 
 
     } 
 
     .playing { 
 
     -webkit-transform: scale(1.1); 
 
     border-color: #ffc600; 
 
     box-shadow: 0 0 10px #ffc600; 
 
     }

<div class = "container "> 
 
    <!-- all kbb elemtns must be inline with each other with padding between them.  --> 
 
    <div class = "keys"> 
 
     <!-- place border around keys --> 
 
     <div data-key = "65" class = "key"> 
 
     <kbd class = "">a</kbd> 
 
     <span class = "sound">Clap</span> 
 
     </div> 
 
     <div data-key = "83" class = "key"> 
 
     <kbd class = "">S</kbd> 
 
     <span class = "sound">HiHat</span> 
 
     </div> 
 
     <div data-key = "68" class = "key"> 
 
     <kbd class = "">d</kbd> 
 
     <span class = "sound">base</span> 
 
     </div> 
 
     <div data-key = "70" class = "key"> 
 
     <kbd class = "">f</kbd> 
 
     <span class = "sound">OpenHat</span> 
 
     </div> 
 
     <div data-key = "71" class = "key"> 
 
     <kbd class = "">G</kbd> 
 
     <span class = "sound">boom</span> 
 
     </div> 
 
     <!--   specifies an approach to embedding audio inside the web 
 
     audio element : 
 

 
      controls attribute : adds audio controls : play, pause, and volume 
 

 
      <source> element allows specification of alternative audio files which the browser may choose from. 
 

 
       --> 
 
    </div> 
 
</div> 
 
<!-- Use data-* attribute to embed custom data --> 
 
<audio data-key = "65" src = "sounds/clap.wav"></audio> 
 
<audio data-key = "83" src = "sounds/hihat.wav"></audio> 
 
<audio data-key = "68" src = "sounds/kick.wav"></audio> 
 
<audio data-key = "70" src = "sounds/openhat.wav"></audio> 
 
<audio data-key = "71" src = "sounds/boom.wav"></audio>

Answer 2

关于document.querySelector('key[data-key="${e.keyCode}"]')。 关键因素不在这里。

您的意思是document.querySelector('.key[data-key="${e.keyCode}"]')？