Javascript - need help to understand why the while loop isn't working

Question

I'm probably going to ask a stupid question, but I really need a definitive verdict on this.

I've got 2 while loops.

Code 1:

document.getElementById("guess").onclick = function() {

  var myNumber = document.getElementById("myNumber").value;
  var gotIt = false;
  var numberOfGuesses = 1;

  while (gotIt == false) {

    var guess = Math.random();
    guess = guess * 6;
    guess = Math.floor(guess);

    if (guess == myNumber) {

      gotIt = true;

      alert("Got it! It was a " + guess + ". It took me " + numberOfGuesses + " guesses.");

    } else {

      numberOfGuesses++;
    }
  }
}

<input type="text" name="" id="myNumber">
<button id="guess">Guess!</button>

Code 2:

document.getElementById("guess").onclick = function() {

  var myNumber = document.getElementById("myNumber").value;
  var gotIt = false;
  var numberOfGuesses = 1;

  while (gotIt == false) {

    var guess = Math.random();
    guess = guess * 6;
    guess = Math.floor(guess);

    if (guess == myNumber) {

      gotIt = true;
      alert("Got it! It was a " + guess + ". It took me " + numberOfGuesses + " guesses.");
    } else {
      numberOfGuesses++;
    }
  }
}

<select id="myNumber">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<button id="guess">Guess!</button>

The 2nd piece works fine; the 1st crashes the browser. My idea is the 1st one is taking too many loops to guess, but I can't quite work out why this is happening.

Thanks to anyone willing to explain.

What's the difference between the two pieces of code? They look almost exactly the same. — Pointy, Feb 05 '17 at 19:43
Works for me as well. Remember, if you place any number larger than 5 or smaller than 0 then your code will never be able to guess that number. And you will get an infinite loop, and that will make your browser hang. — Armand Maree, Feb 05 '17 at 19:48
why do you even need a while loop. since you're assigning a function to a click event, there's no need for any loop. — m87, Feb 05 '17 at 19:52
@siam the point is to have the code generate random numbers until it generates the right one. Why anybody would want or need to do that, I don't know; best guess is that it's a homework assignment. — Pointy, Feb 05 '17 at 19:59
I would suggest `while(!gotIt && numberOfGuesses < 1000)` - some kind of bailout if it fails to work. — Niet the Dark Absol, Feb 05 '17 at 20:18
random generation are not efficient on the CPU you should try to avoid using them as many as u do but if you must check out this [post](http://stackoverflow.com/a/32101215/6482090) it a little function that will generate numbers in a random order without repeating them. — greenseed, Feb 05 '17 at 20:43

score 0 · Answer 1 · answered Feb 05 '17 at 20:35

0

Basically both approaches work just fine. You just have a little logical error in your first implementation.

The reason you have number one hanging is because you don't limit the user to input numbers in the range of 0-5. Therefore any number out of that range will loop forever as it will never result in a number of the 0-5 range, which you have restricted to when multiplying the random by 6.

Bottom line: Either go with option 2, or validate that the user actually typed a number in the range of 0-5.

answered Feb 05 '17 at 20:35

Z-Bone

1,534
1
10
14

Thank you. #1 is hanging for me even when I enter 3, for instance. I was wondering why its doing that. – Julia Oliynyk Feb 05 '17 at 21:02
That's very odd...I ran it both on the fiddle i n your question and locally on my machine. Works perfectly with any number between 0-5. I have 2 questions for you. `1)` If you use the fiddle from your question does it also hang?. `2)` Can you post the exact HTML you are running locally on your machine? – Z-Bone Feb 05 '17 at 21:21

Javascript - need help to understand why the while loop isn't working

1 Answers1