Получение следующей ошибки: RGB. js: 16 Uncaught TypeError: Невозможно прочитать свойство 'add' undefined в HTMLButtonElement. <anonymous>(RGB. js: 16) - PullRequest
Новая
       8

Получение следующей ошибки: RGB. js: 16 Uncaught TypeError: Невозможно прочитать свойство 'add' undefined в HTMLButtonElement. <anonymous>(RGB. js: 16)

0 голосов
/ 08 января 2020

Я делаю в игре 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;
 }

Ответы [ 3 ]

2 голосов
/ 08 января 2020

Свойство classList предполагается верблюжьим, это должно исправить, отличная игра, кстати)

1 голос
/ 08 января 2020 
I don't know actual flow, but some changes in JS made this easy and hard button work.



    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.getElementById("easybtn");
var hardbtn= document.getElementById("hardbtn");


easybtn.addEventListener("click",function(){
  console.log('working');
document.getElementById("easybtn").classList.add("selects");
document.getElementById("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(){

document.getElementById("hardbtn").classList.add("selects");
document.getElementById("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 + ")";


}
1 голос
/ 08 января 2020

это будет classList не classlist

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 + ")";
    }




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(){
console.log(this);
this.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";



    }
    });
}
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;
 }
<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>
...