When I put the while loop in like this, my background and my prompts never show up. I have no clue on why would be causing this. Everything else works to perfection, it is just once I add the while loop my code breaks. I have tried a for loop as well but it also does not work.
//score
var score = 0
//replay loop
var replay = "yes"
//name of each gen 1 pokemon
var pname = ['#']
//images for each one
var bg = ['#']
while (replay == 'yes'){
background = bg[num = Math.floor(Math.random() * bg.length)];
document.body.style.backgroundImage = 'url(' + background + ')';
setTimeout(() => {
var answer = prompt("What pokemon is this?")
if (answer.toLowerCase() == pname[num].toLowerCase()) {
alert("correct")
score ++
replay = prompt("Want to keep playing?")
} else {
alert("incorrect")
replay = prompt("Want to keep playing?")
}
}, 2000);
}
setTimeout function is going to take 2 seconds before it runs, thus causing your while loop to execute an actual massive number of times in 2 seconds... all the time updating the background image (which it probably does easily over 10,000 X in 2 seconds.
I suggest using recursion:
//score
var score = 0;
//replay loop
var replay = "yes";
//name of each gen 1 pokemon
// var pname = [#]; <- this needs to hold all the available names
//images for each one
//var bg = [#]; <-this needs to hold all the available images
let keepPlaying = function(){
background = bg[Math.floor(Math.random() * bg.length)];
document.body.style.backgroundImage = 'url(' + background + ')';
var answer = prompt("What pokemon is this?")
if (answer.toLowerCase == pname[num].toLowerCase) {
alert("correct")
score ++
replay = prompt("Want to keep playing?")
} else {
alert("incorrect")
replay = prompt("Want to keep playing?")
}
if(replay == 'yes')
keepPlaying()
else
return(score)
}()
The while loop will not wait for setTimeout() to complete .You need to find out a different way.
This both line are not valid
var pname = [#] // var pname = ['#']
var bg = [#], // var bg = ['#']
var score = 0
var replay = "yes"
var pname = ['#']
var bg = ['#']
var index = 0;
(function asyncLoop() {
background = bg[num = Math.floor(Math.random() * bg.length)];
document.body.style.backgroundImage = 'url(' + background + ')';
setTimeout(function() {
var answer = prompt("What pokemon is this?")
if (answer == pname[num]) {
alert("correct")
score ++
replay = prompt("Want to keep playing?")
} else {
alert("incorrect")
replay = prompt("Want to keep playing?")
}
if (replay == 'yes'){
asyncLoop();
}
}, 1000);
})();<body></body>Let me point out a few things in the code first.
var pname = [#] --> is not a valid syntax
var bg = [#], --> not valid and having a comma here
Also the setTimeOut function is getting executed many times hence making the script unresponsive.
Give this a try :
var pname = ['qq','ww','ee'];
var replay = "yes";
var score = 0;
var bg = [];
var num = 1;
keepPlaying();
function keepPlaying() {
var answer = prompt("What pokemon is this?")
if (answer == pname[num]) {
alert("correct")
score ++
replay = prompt("Want to keep playing?")
}
else {
alert("incorrect")
replay = prompt("Want to keep playing?")
}
if(replay == 'yes') {
keepPlaying();
}
else {
alert(score);
}
}