html未定属性,发生以下错误：RGB.js：16未捕获的TypeError：无法读取HTMLButtonElement上未定义的属性'add'。（（RGB.js：16）...

我正在制作RGB Guessing游戏，因此我为它添加了简单按钮和硬按钮，其中，简单模式将具有3个随机彩色方块，而另一方面，每次硬模式将具有6个随机彩色方块硬和单击简易按钮，但我的班级列表不起作用，并且显示错误，以下用于简易按钮的代码也无效。

HTML文件：

RGB Guess Game

The Great RGB Game

New Color

Easy

Hard

Javascript文件：var numSquares=6;

var color = generateRandomColor(numSquares);

var square=document.querySelectorAll(".square");

var colorDisplay=document.getElementById("colorDisplay");

var pickcolor=selectedColor();

var messageDisplay= document.querySelector("#message");

var h1= document.querySelector("h1");

var resetButton= document.querySelector("#reset");

var easybtn= document.querySelector("#easybtn");

var hardbtn= document.querySelector("#hardbtn");

easybtn.addEventListener("click",function(){

easybtn.classlist.add("selects");

hardbtn.classlist.remove("selects");

numSquares=3;

color=generateRandomColor(numSquares);

pickcolor=selectedColor();

colorDisplay.textContent=pickcolor;

for(var i=0; i

{

if(color[i])

{

//square[i].style.display="block";

square[i].style.backgroundColor=color[i];

}

else

{

square[i].style.display="none";

}

}

});

hardbtn.addEventListener("click",function(){

hardbtn.classlist.add("selects");

easybtn.classlist.remove("selects");

numSquares=6;

color=generateRandomColor(numSquares);

pickcolor=selectedColor();

colorDisplay.textContent=pickcolor;

for(var i=0; i

{

square[i].style.backgroundColor=color[i];

square[i].style.display="block";

}

});

resetButton.addEventListener("click",function()

{

//generate random colors

color = generateRandomColor(numSquares);

//pick color

pickcolor= selectedColor();

//change the color

colorDisplay.textContent=pickcolor;

for(var i=0; i

{

//color set intially

square[i].style.backgroundColor=color[i];

}

h1.style.backgroundColor="#232323";

});

for(var i=0; i

{

//color set intially

square[i].style.backgroundColor=color[i];

//event listener being added

square[i].addEventListener("click",function(){

//grab the clicked color

var clickedColor = this.style.backgroundColor;

//compare it with the picked color

if(clickedColor === pickcolor)

{

messageDisplay.textContent="Correct";

resetButton.textContent="Play again?"

changeColor(clickedColor);

h1.style.backgroundColor=clickedColor;

}

else

{

this.style.backgroundColor = "#232323";

messageDisplay.textContent="Try Again";

}

});

}

function changeColor(color)

{

for(var i=0; i

{

//color set intially

square[i].style.backgroundColor=color;

}

}

function selectedColor()

{

var selected=Math.floor(Math.random()*color.length);

return color[selected];

}

function generateRandomColor(num)

{

//make an array

var arr=[];

//loop through num times

for(var i=0;i

{

arr.push(randomColor());

}

//return the array

return arr;

}

function randomColor()

{

//random selction for red from 0 to 256

var r= Math.floor(Math.random()*256);

//random selction for green from 0 to 256

var g= Math.floor(Math.random()*256);

//random selction for blue from 0 to 256

var b= Math.floor(Math.random()*256);

return "rgb(" + r + ", " + g + ", " + b + ")";

}

CSS文件：body{

background-color: #232323;

}

.square{

width: 30%;

background-color: purple;

padding-bottom: 30%;

margin: 1.66%;

float:left;

}

#container

{

margin: 0 auto;

max-width: 600px;

}

h1

{

color : white;

}

#stripe

{

height: 30px;

background: white;

text-align: center;

}

.selects

{

background: blue;

}