+ 2

Find the Button Game

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

25th Jul 2022, 4:29 PM
Your Mom
Your Mom - avatar
18 Answers
+ 3
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;).
25th Jul 2022, 5:19 PM
🍇 Alex Tușinean 💜
🍇 Alex Tușinean 💜 - avatar
+ 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.
25th Jul 2022, 5:42 PM
Jehoshaphat Obol
Jehoshaphat Obol - avatar
+ 2
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
27th Jul 2022, 6:50 AM
Daniel Nwachukwu Chigozirim
Daniel Nwachukwu Chigozirim - avatar
+ 1
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
26th Jul 2022, 9:20 AM
Bob_Li
Bob_Li - avatar
+ 1
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.
26th Jul 2022, 9:36 AM
Bob_Li
Bob_Li - avatar
0
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.
25th Jul 2022, 4:44 PM
🍇 Alex Tușinean 💜
🍇 Alex Tușinean 💜 - avatar
0
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?
25th Jul 2022, 4:48 PM
Your Mom
Your Mom - avatar
0
Thanks 🍇 Alex Tușinean 💜 and Jehoshaphat Obol. Both of yall helped so much!
25th Jul 2022, 5:54 PM
Your Mom
Your Mom - avatar
0
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
25th Jul 2022, 6:31 PM
Your Mom
Your Mom - avatar
0
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
25th Jul 2022, 8:23 PM
PanicS
PanicS - avatar
0
Okay so i created another function except now my timer isnt going down you know why?
25th Jul 2022, 8:34 PM
Your Mom
Your Mom - avatar
0
Nevermind
25th Jul 2022, 8:35 PM
Your Mom
Your Mom - avatar
0
PanicS The timer isnt going to 0 still can you show me what you mean?
25th Jul 2022, 8:39 PM
Your Mom
Your Mom - avatar
0
Your Mom I checked your code now and timer stop at 0
25th Jul 2022, 9:26 PM
PanicS
PanicS - avatar
0
Ye
25th Jul 2022, 9:26 PM
Your Mom
Your Mom - avatar
0
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?
25th Jul 2022, 11:02 PM
Your Mom
Your Mom - avatar
0
Nevermind
25th Jul 2022, 11:13 PM
Your Mom
Your Mom - avatar
0
Sidenote: Timer isn't working either.
27th Jul 2022, 6:04 AM
Mr.ActionGal101
Mr.ActionGal101 - avatar