checkAnswer function for a guess background color game

JavaScript
1

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

2

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
4

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:

5

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
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.