爲什麼我的classList不向HTML元素添加類？

我正在嘗試向我的分區元素添加一個'playing'類，以便當'keydown'由'kbd'元素指定的指定鍵上時，具有其屬性的'playing'類將應用於'kbd'元素。爲什麼我的classList不向HTML元素添加類？

沒有發生這種情況。我不斷收到這個錯誤：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() 
});

來源

2017-07-24 Waltham WECAN

錯誤可能是指'key'爲null，而不是'classList'。檢查當時是否定義了「key」 – Max

在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>

來源

2017-07-25 00:02:40 Yatin

我的意思是用一個'key'類來訪問division元素。 –

我將它更改爲div並將其記錄到控制檯。它現在顯示爲未定義。 –

@WalthamWECAN我修改了上面的代碼。這是按照你想要的方式運行的。希望它解決了你的問題。 – Yatin

關於document.querySelector('key[data-key="${e.keyCode}"]')。關鍵因素不在這裏。

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

來源

2017-07-25 00:25:42 mokamoto12

現在它向我展示'undefined'原始值 –

@WalthamWECAN對不起，我輸入單引號反向引用，document.querySelector（'.key [data-key =「$ {e.keyCode}」] \' .key正在玩類添加？ – mokamoto12

@ makamoto12我已經有反引號''。我們的目標是在'div'類中添加'playing'類並且使用'key'類。 –

爲什麼我的classList不向HTML元素添加類？

回答

相關問題