While loops

A while loop basically runs a piece of code while a test condition evaluates to true. A while loop can repeat a set of instructions (code) over and over again until the test condition evaluates to false and the loop breaks. The rest of the program will then continue running.

Watch the video below which explains a few different ways that you can use while loops in a program. You can also view it on YouTube by clicking here.

Take a look at the code below. A counter variable is given an initial value of 1. While the counter variable is less than or equal to 10, a new paragraph of text will display on the screen. The counter will increase by 1 for every iteration of the loop. The web page will display ten paragraphs before the loop ends (once the counter reaches the value of 11), and each paragraph will have the counter number value appended to the end of it.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - While Loops</title>
 <script type="text/javascript">
 
 var counter=1;
 
 while(counter<=10){
 document.write("This is paragraph "+counter+"</p>");
 counter++; // this is equivalent to counter = counter+1
 }
 
 
 </script>
 
</head>
<body>
 
</body>
</html>

In the example below, a string is used instead. The loop checks if the password is correct and then displays a message if it is correct. However, there is a problem with the code below…can you spot it? Scroll down to find out what is wrong with the code.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - While Loops</title>
 <script type="text/javascript">
 
 var password = "potato";
 
 while(password == "potato"){
 document.write("You have entered the correct password.");
 // more code can go here...
 }
 
 </script>
 
</head>
<body>
 
</body>
</html>

The problem with the snippet of code above is that the condition for the while loop will always evaluate to true, and so the loop will never stop running! This is called an infinite loop. The password variable is set to “potato” and while the password stored is equal to “potato”, the loop will run again and again. But there is no way to enter a different password…unless we allow for user input!

One way of allowing for user input is to use a JavaScript prompt such as the one used below. This time the while loop is set up a little differently.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - While Loops</title>
 <script type="text/javascript">
 
 var password = prompt("Enter a password");
 
 while(password != "potato"){
 password = prompt("You have entered the wrong password. Try again.");
 }
 
 document.write("You have entered the correct password! Welcome!");
 
 </script>
 
</head>
<body>
 
</body>
</html>

Tip: You can also use the break command to end a loop if a condition has evaluated to true. You could use an if statement inside a while a loop and then use the break; command to break the loop.

break;

Next tutorial: Do..While loops