Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Can someone explain why this code returns an endless loop?

var number = randNum(3);
var guess;
var guessCount = 0;

function randNum( upper ) {
  var getNumber = Math.floor( Math.random() * upper ) + 1;
  return getNumber;
}

do {
  guess = parseInt( prompt('Can you guess the number?') );
  guessCount += 1;
} while ( guess !== number )

document.write('You guessed it! ' + 'It took you ' + guessCount + ' tries to guess the number ' + number);

3 Answers

Steven Parker
Steven Parker
243,656 Points

The loop only lasts as long as it takes to guess the number, it's not really "endless" unless you always put in a wrong guess.

Now if the number range were much larger, it might be very hard to guess the number and it might seem endless!

That's the thing though. I'm guessing a number 1-3 but I can never guess the number. It seems the loop doesn't end even when I guess the correct number, but I can't find the error in my code.

Steven Parker
Steven Parker
243,656 Points

Odd, I tried it several times and it always ended for me, though sometimes I had to guess all 3 times. Did you try checking the browser console for errors?

I just figured it out. My script was fine, it was an external stylesheet that was causing my bug, facepalm. Haha, thanks for your help!

Steven Parker
Steven Parker
243,656 Points

I'd be curious to know how a stylesheet could have prevented the program from working!

body {
  font-size: 1.4rem;
  padding: 0 400px;
}

form {
  max-width: 500px;
  margin: 5em auto 0;
}

form fieldset {
  border: 2px solid lightblue;
  border-radius: 5px;
  padding: 1em;
}

form fieldset  > * {
  display: block;
}

input {
  margin-bottom: 1.2em;
  padding: 0.5em 0.6em;
}

This code was in an external css file linked to my index.html. I had forgot it was linked. The body of my index.html file has nothing in it except for the linked script. I'm in the same boat as you as to not understanding why this would cause issues with the script...but at least it works now. :)

Steven Parker
Steven Parker
243,656 Points

I got the exact same (correct) behavior with the CSS. But it did look prettier!

Weirrrrrrd haha. I'm off to my day job but I'll definitely play around with the code later. Perhaps it was a browser issue (but I'm using chrome). Thanks again for all your help, Steven!