I can not seem to get a while loop to work with my code

user_17061691 0
Viewed 84

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);
}

https://jsfiddle.net/e6cbt2dz/

while-loop javascript
3 Answers

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)
}()
user_167696840

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>

user_149369050

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 :

  • I have excluded the image section from the code, which you can add later and 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);
    }
}
user_167641720
Related