[ANSWERED] javascript – Getting the following error: RGB.js:16 Uncaught TypeError: Cannot read property ‘add’ of undefined at HTMLButtonElement. (RGB.js:16)

Question 1

The classList property suppose to be camel case, it should fix it,
great game by the way)

Question 2

it will be classList not 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>

Question 3

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


}

Question 4

I am making on an RGB Guessing game hence I have added easy and hard button for the same wherein the easy mode will have random colored 3 square blocks while on the other hand, the hard mode will have 6 colored random blocks each time the hard and easy button is clicked but my class list is not working and showing the error also the following code for the easy button isn’t effective.

HTML file:

<!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 file:

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 file:


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

Bollate

[ANSWERED] javascript – Getting the following error: RGB.js:16 Uncaught TypeError: Cannot read property ‘add’ of undefined at HTMLButtonElement. (RGB.js:16)

By

Solution 1 :

Solution 2 :

Solution 3 :

Problem :

By

Related Post

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate