Find the Button Game

Question

Okay so my New Game button only works once how do I make it so it works multiple times
https://code.sololearn.com/W5cqSs3aH5cw/?ref=app

Answer 1

https://code.sololearn.com/Wrfb45gk6vhS/?ref=app
Check this demo.
You don't actually need to write in js the line which makes the button s position absolute, you can just write that in css(position:absolute;).

Answer 2

The new game button actually works just fine the only issue is that every time the newgame() function is called the buttons are set to the same position as before without resetting.
to correct this try resetting the positions of the buttons in the newgame function.
try the following algorithm:
newgame(){
    --declare the variables for X and Y positions
    --set random values to the X and Y positions
    --set the positions of the buttons
}

instead of:
    --declare the variables for X and Y positions
    --set random values to the X and Y positions
newgame(){
    --set the positions of the buttons
}

To do a quick fix just cut and paste "function newgame() {" to the first line of your code.

Answer 3

I suggest using document.querySelectorAll('buttons')

I suggest giving the click me buttons a specific class name

Run a for loop through the node list

Then on setting the click function for the new game , put the for loop inside the function and then create a math.random function in a math.ceil function

Answer 4

Your Mom
nice idea.
Borrowing your idea, here is a non timer game that counts the clicks, instead of using a tmer.
A game of luck.
Is bigger or smaller number the winner? It depends on whether the goal is to find or avoid the target.😁
I have gotten 1 and 100. Maybe I am both lucky and unlucky today.😅

edit: added v2 which uses css animation instead of alert, and uses div overlay to prevent click events after game is over.
also, little known addEventListener parameter {once:true} that makes the callback run only once.

https://code.sololearn.com/WK6om1U83Ck6/?ref=app

https://code.sololearn.com/WA29S8izrUjt/?ref=app

Answer 5

Your Mom
Breaking down your javascript into functions is one way of creating blocks of code that can be composed and called if needed, multiple times.

You wrote your javascript in a way that can only be executed once.
If you wrapped it in a function, then you can call it again with a button click.

Examine the code I posted. There are many functions there that does different things, and they are all ultimately inside the newgame function.

Also you can create the DOM elements in javascript to minimize code repetition and clutter in the html.
Not hardcoding them in the hml also enables you to shuffle your elements everytime a new game is started.

Answer 6

Ok so there are a few issues.
One would be the repetition.
Instead of all those variables being random, you can use these 2 functions, and just say document.getElementById("button3").style.left = randX()

function randX(){
return Math.random() * window.innerWidth + "px";
}

function randY(){
return Math.random() * window.innerHeight + "px";
}

Also, you can just use document.getElementById("yourID") in the functions instead of all those button variables. it s easier and spares some time.

Answer 7

Ye but i think the problem with that is all 20 button will be in all alined in the same position i think. Did you test it?

Answer 8

Thanks 🍇 Alex Tușinean 💜 and Jehoshaphat Obol. Both of yall helped so much!

Answer 9

Okay so now im trying to add a timer to make it a little harder. Except my setTimeout is making the buttons move. How do i fix that? Also why is my timer stopping at 1 instead of 0

https://code.sololearn.com/W5cqSs3aH5cw/?ref=app

Answer 10

Your Mom
To make timer stop at 0, set inside interval, timer < 0 not timer === 0.

Buttons are moving because:
Your app will call newGamef every second and you inside this function are setting random width and height, so your buttons get random position every second.
If you wanna only timer to change make new function where you change timer and call this function inside interval.

Also you have error in your code, it cant set style of button1 because it is null, you can move selectors of buttons to newGamef, or wrap tham inside window.onload, so js is loaded after elements are created in html, not before

Answer 11

Okay so i created another function except now my timer isnt going down you know why?

Answer 12

Nevermind

Answer 13

PanicS The timer isnt going to 0 still can you show me what you mean?

Answer 14

Your Mom I checked your code now and timer stop at 0

Answer 15

Ye

Answer 16

Last question. Anyone know how to add an alert that says you lose when the timer reaches 0 and you didnt click the right button?

Answer 17

Nevermind

Answer 18

Sidenote: Timer isn't working either.