0
我正在嘗試向我的分區元素添加一個'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()
});
錯誤可能是指'key'爲null，而不是'classList'。檢查當時是否定義了「key」 – Max