checkAnswer function for a guess background color game

actually i begun with building a background color changer app but i wanted to make it a little fun with adding buttons of the possible background colors to challenge the user but i got stuck in the function of checking the answer here s
the html code

<html>
   
<head>
   <title>
   document
   </title>
   <link rel="stylesheet" href="style.css">
</head>
  <body>
         <div class="guess">
           <h1> guess the color of the next background color </h1> <br>
      <button id="yb" value="yellow" >yellow</button>
      <button id="rb" value="red" >red</button>
      <button id="wb" value="white" >white</button>
      <button id="ob" value="orange">orange</button>
      <button id="bb" value="blue">blue</button>
      <button id="pb" value="pink">pink</button>
      <button id="gb" value="green">green</button>
        </div>
<!--<button  class="colorBtn" type="button">
   click here to change color 
</button>
-->
<script src="script.js"></script>
  </body>



</html>

and the js code

const colors = ["yellow","red" ,"green" ,"blue" ,"white","pink","orange"];
yb.addEventListener('click',changeColor);
rb.addEventListener('click',changeColor);
wb.addEventListener('click',changeColor);
ob.addEventListener('click',changeColor);
bb.addEventListener('click',changeColor);
pb.addEventListener('click',changeColor);
gb.addEventListener('click',changeColor);

function changeColor(){
    let random = Math.floor(Math.random()*colors.length)
bodyBcg.style.backgroundColor=colors[random];


}
const checkAnswer=()=>{
 var innerHTML=""
    if (yb.value=="yellow")
{
    innerHTML=`
    <div>
    <h1> You got it  </h1>
    </div>
    `
}
else 
{innerHTML=`
<div>
<h1> next Time!!!!  </h1>
</div>
`}
}   

actually the event Listener don 't accept two parameters so i don t know if my beginning of checkAnswer logic is ok and i didn t know where to call the function i m thinking of asynchronous functions ,the truth i understand those type of functions but still not familiar with using it i mean writing it from scratch

what are the variables yb rb wb ob bb pb gb? they are not defined anywhere?

make sure to give all the code, otherwise we are not able to help

1 Like

They are defined by the ids in:

      <button id="yb" value="yellow" >yellow</button>
      <button id="rb" value="red" >red</button>
      <button id="wb" value="white" >white</button>
      <button id="ob" value="orange">orange</button>
      <button id="bb" value="blue">blue</button>
      <button id="pb" value="pink">pink</button>
      <button id="gb" value="green">green</button>

JavaScript will automatically create a global variable with the same name as each element’s id. It is not recommended as it is always better to explicitly define variables to be used.

It is the equivalent of writing:

var yb = document.getElementById('yb');
var rb = document.getElementById('rb');
var wb = document.getElementById('wb');
var ob = document.getElementById('ob');
var bb = document.getElementById('bb');
var pb = document.getElementById('pb');
var gb = document.getElementById('gb');

@mnhz13299 Can you explain exactly what you are expecting the app to do that it is not doing? Currently, when you click on any of the buttons, it will randomly change the background color (as long as you have added id="bodyBcg" to the opening body tag.

Were you wanting the background color to change to the color specified on the button?

1 Like

i want the user to choose one of the buttons and according to his choice i render an element that tells him if he guessed right or not i’m stuck with the function of checking the answer and i m thinking of asynchronous functions because the bg color changes on the press of the button for now all buttons like u mentionned are just changing the background color which is ok however as a reaction i need to inform the user if he s lucker or not i mean guessed the color well :smile:

Why not create a new function that’s sole purpose is to return a random color? You already have most of the logic in changeColor so that should be easy.

Next, you need a variable where you assign the result of calling this new function. It will contain a random color you are wanting your user to try to guess.

Finally, your checkAnswer will need to take advantage of the event object that already gets passed to it when any of the buttons are clicked. The event object has a property named target that references the actual button clicked. since the target property is the button clicked, you can access the button’s value property and check if they match.

As far as showing a message (like your You go it or next Time), I would suggest creating an element with an id like message and then make sure to update the element’s innerHTML property with the applicable message text.

Make sure your checkAnswer is the callback function for each button’s click event handler.

For added effect, you could also change the background color to the color clicked.

1 Like