我正在尝试添加一类播放＆＃39;我的分裂元素，以便当我'keydown＆＃39;在＆＃39; kbd＆＃39;指示的指定键上元素，“玩”的类别。其属性将被应用于＆＃39; kbd＆＃39;元件。
这一切都没有发生。我一直收到这个错误：null不是一个对象（评估＆＃39; key.classList＆＃39;）。
<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()
});
答案 0 :(得分：1)
关于document.querySelector('key[data-key="${e.keyCode}"]')。
关键因素不在这里。
你的意思是document.querySelector('.key[data-key="${e.keyCode}"]')？
答案 1 :(得分：0)
在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>