未捕获的类型错误： 无法读取函数中未定义的属性'add'

Question

我开始了我的第一个网络开发者训练营，我确实写了与教育者相同的代码，但有一个错误"未捕获的类型错误：无法读取未定义的"的属性"add"；将此类添加到函数后：

.pressed {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}

js代码页：

function makeSound(key) {
switch(key){
case "w":
var audio = new Audio('sounds/tom-2.mp3');
audio.play();
break;
case "a":
var audio = new Audio('sounds/tom-1.mp3');
audio.play();
break;
case "s":
var audio = new Audio('sounds/tom-3.mp3');
audio.play();
break;
case "d":
var audio = new Audio('sounds/tom-4.mp3');
audio.play();
break;
case "j":
var audio = new Audio('sounds/kick-bass.mp3');
audio.play();
break;
case "k":
var audio = new Audio('sounds/snare.mp3');
audio.play();
break;
case "l":
var audio = new Audio('sounds/crash.mp3');
audio.play();
break;
default:
console.log(butnhtml);
}
}
// animetion

function animetion (curk){
var activeButton =document.querySelectorAll("."+curk);
activeButton.classlist.add("pressed ");
setTimeout(function(){
activeButton.classlist.remove("pressed ");     }
, 100);
}
// mouse
var n =document.querySelectorAll(".drum").length ;
for(var i =0 ; i<n ; i++){
document.querySelectorAll(".drum")[i].addEventListener("click", function (){
var butnhtml= this.innerHTML;
makeSound(butnhtml);
animetion(butnhtml);
})
}
// keyboard
document.addEventListener("keypress", function(event) {
animetion(event.key);
makeSound(event.key);
});

"；添加"；动画部分不起作用，但如果我在h1中添加相同的类，它就会起作用，并且我使用chrome作为浏览器和atom广告代码编辑器，希望你能帮助我解决这个问题

Answer 1

您必须使用classList而不是classlist。

此外，document.querySelectorAll()返回NodeList。您必须对它进行迭代，并在每个元素上使用classList.add()。

var activeButton = document.querySelectorAll("." + curk);
activeButton.forEach(function(el) {
el.classList.add("pressed");
setTimeout(function() {
el.classList.remove("pressed");
}, 100);
}

如果只需要将其应用于一个元素，则可以使用document.querySelector()，返回第一个匹配项。

var activeButton = document.querySelector("." + curk);
activeButton.classList.add("pressed");
setTimeout(function(){
activeButton.classList.remove("pressed");
}, 100);