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

Question

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

html文件：

<!DOCTYPE html>
<html>
<head>
    <title>RGB Guess Game</title>
    <link rel="stylesheet" type="text/css" href="RGB.css">
</head>
<body>

<h1> The Great <span id="colorDisplay">RGB</span> Game</h1>

<div id="stripe">
    <button id="reset">New Color</button>
    <span id="message"></span>

    <button id="easybtn">Easy</button>
    <button id="hardbtn" class="selects">Hard</button>
</div>

    <div id="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
   </div>


   <script src="RGB.js"></script>


</body>
</html>

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<square.length;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.length;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<square.length; i++)
{
    //color set intially
    square[i].style.backgroundColor=color[i];
}
h1.style.backgroundColor="#232323";
});


for(var i=0; i<square.length; 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<square.length; 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<num;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;
 }