提问人：kolbykiernan 提问时间：10/23/2023 更新时间：10/23/2023 访问量：35
使用 Javascript 回调函数构建钢琴时遇到问题
Having trouble with a Javascript callback function building a piano
问：
我使用Javascript大约一个月了，并试图建造一架钢琴。我的音频使用 keydown 事件工作正常，但现在我试图让钢琴的特定键看起来好像是被按下的，并且无法弄清楚这部分。
其他上下文：尽管音频工作正常，但我在控制台日志中收到错误“whiteKey.contains 不是函数”和“blackKey.contains 不是函数”
“white”和“black”是类，也是我的白键和黑键的默认CSS。
“white-pushed”和“black-pushed”也是带有新 CSS 的类，当激活时，类似于按下的键。
谢谢
const whiteKey = document.getElementsByClassName('white');
const blackKey = document.getElementsByClassName('black');
function whiteKeyDown(){
if (!whiteKey.contains('white-pushed')){
whiteKey.add('white-pushed')
}
}
function blackKeyDown(){
if (!blackKey.contains('black-pushed')){
blackKey.add('black-pushed')
}
}
document.addEventListener('keydown', (playNote) => {
if(playNote.repeat) return;
if(playNote.key == 'c'){
if (playNote.ctrlKey){
blackKeyDown(document.getElementById('low-c#').play())
} else {
whiteKeyDown(document.getElementById('low-c').play())
}
}
}
答：
0赞
DimensityDU
10/23/2023
#1
document.getElementsByClassName()返回包含指定类名的元素数组
你不能直接在它上面使用，你必须从.containsdocument.getElementsByClassName()
例如：
const whiteKey = document.getElementsByClassName('white');
function whiteKeyDown(){
// whiteKey[0] is the first element that have the 'white' class name on it
if (!whiteKey[0].classList.contains('white-pushed')) {
whiteKey[0].classList.add('white-pushed')
}
}
您可以在此处阅读有关该方法的更多信息
评论
whiteKey.classList.contains('white-pushed')whiteKey.classList.add('white-pushed')