How to randomize without page refresh

Hey quick question. I got this fruit guessing game working and even added a hint feature that im really proud of. Now im just working on some quality of life stuff to make the game a bit more “sophisticated” .

My question is, how can I get my code to generate a new random fruit after the final, “you win” alert? As it is now, the user will need to refresh the page to get a new random fruit to generate, with is fine but kind of a hinderance if one wants to start a new game and finds that it is stuck on the fruit selection from the old play through.

Any idea how to do this?

any help would help :grin:

An important thing to keep in my mind is the UX of your product, and an infinite alert until you get the right answer is bad UX, and I would highly recommend that you simply use an input tag plus a button for that feature rather than an alert, and from there it should be pretty simple to fix your problem. We will say once the page has loaded we want the correct fruit to be chosen, and then the user will guess that fruit in the input field, and submit their answer with a button, you will then check their answer, and if it is right you will congratulate them, and re-randomize the fruit from the array. There are important UX steps to be taken here, but its not a huge deal if you are just trying to write something that works.

1 Like

Yeah I was just trying to write something that works here to better learn the skillset that im currently learning. I think that creating an input for the functionality would be best as well. But in not quite there yet. Also as far as the UX goes, I wanted the design to be as minimal as possible, that’s why I chose to just have two buttons on the page.

So is there no way to regenerate a random fruit with this method?

All you need to do is use the same method of picking a random fruit as you did the first time and put it inside your win condition. You do not need to put the entire array in there, and make sure you do not re-declare your variables as that will throw an error.

1 Like

Yeah I tried that but I think im doing something wrong here. My randomFruit variable is the randomizer. and ive tried putting that after the alert to rerandomize the fruit but is isn’t working for whatever reason.

else if ( fruitGuess == randomFruit){

alert("YOU WIN! " + "It only took you " + tries + " tries!" )

} while (fruitGuess!=randomFruit);

May I see how the code actually looks when you put it in there because that is the right place, and remember to console.log(randomFruit) before the break so you know its working.

1 Like


I just updated it on my codepen. It seems like in the console its spitting out the same fruit after the alert runs.

you need to reassign randomFruit, generate a new random index and reassign randomFruit = randomIndex. This method could lead to a repeat of the same fruit, but its less than likely, but you could make an implementation so repeats are impossible.

1 Like

So you’re saying recreate a new variable that randomizes the array and use that to assign to randomFruit variable in place of the current one?

Just checking if I understand correctly.

create a new random index and assign randomFruit to that index within the array

Let me say first, congratulations on your project. Second, instead of using the typical, “you win” at the end of a game program, why not say, “You Reached Your Goal! Congratulations!” Then after the game ends, you can say, “Ready to Start A New Goal?”

That way, there’s no disappointment psychologically for the player. They passed their level because it was a goal they set fo r themselves. If you say, “You win” it loses momentum overtime. Boredom sets in after a person is obsessed with winning, then they need a new game to conquer. I know this because I can’t play video games anymore they are psychologically programmed to get me addicted to “winning.” In truth, I lose.

Just a suggestion, you don’t have to take the advice. I just feel if your game is treated like a goal for the player to achieve, they’ll be eager to start another. Just like life. If we take the “win” out of reality, the energy flows better.

Best of luck to you.

1 Like

Thats a fantastic suggestion. I will definitely implement this! Makes a lot of sense, especially in an application such as this! Great idea, Thanks a lot! :+1:

One thing that I feel would be a huge boon to user enjoyment is actively displaying the current fruits fact on the page rather than only showing once someone has failed multiple time because as it stands people are just arbitrarily guessing, and that is more irritating than fun. I know you want to keep the game simple, and I think that’s a good idea, but it would also be a good idea to display more information on the page as for guidance. When I get on a webpage I want to think as little as possible; your game is about guessing the right fruit, not guessing how to play the game, and that is a simple yet critical difference to be made.

1 Like

Good idea. So you’re saying displaying a hint at the beginning rather than after multiple failures?

That sounds like a good move.

You’re very welcome, I’m glad I could help. :sparkles:

1 Like

Updated the code with the suggested changes! Still toying around and making some quality of life improvements, but I think im ready to move on to something bigger soon! Thanks for all your help. It really helped me out a ton :+1:

1 Like

That is really cool, I like your project. You make it look so easy, but writing code is hard, so, congratulations.

. I think the universe wants me to learn all about data science so I can make my dream come true.

But I can’t make it all by myself…it takes two developers to create this beautiful project that will bring a lot of good and something new into the world.

1 Like

Thank you so much for helping! It really makes a difference!

Aww I am so glad. Listen, I do not pretend to know anything in regards to coding, perhaps one day you can teach me something, that way we helped each other, okay?

Now I have to surrender my phone to my granddaughter, she wants to watch Disney Plus. Lol :joy:

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