JavaScript while loop


As long as the specified condition is true, the loop can continue to execute the code block.

while loop

The while loop loops through a block of code while a specified condition is true.

Syntax

while (Condition)
{
Code to be executed
}

Example

The loop in this example will continue to run as long as variable i is less than 5:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

## If you forget to increment the value of the variable used in the condition, the loop will never end. This may cause the browser to crash.
lamp
do/while loop

The do/while loop is a variation of the while loop. The loop executes the block of code once before checking whether the condition is true, and then repeats the loop if the condition is true.

Grammar

do
{

Code to be executed
}while (
Condition);
Example

The following Example uses do/while loop. The loop will execute at least once, and it will execute even if the condition is false, because the code block is executed before the condition is tested:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x="",i=0;
	do{
		x=x + "该数字为 " + i + "<br>";
	    i++;
	}
	while (i<5)  
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

Run Example»Click the "Run Example" button to view the online example

Don't forget to increase the value of the variable used in the condition, otherwise the loop will never end!

Comparing for and while

If you have read the previous chapter about for loops, you will find that while loops are very similar to for loops.

The loop in this example uses a

for loop to display all the values ​​in the cars array:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
	document.write(cars[i] + "<br>");
	i++;
}
</script>

</body>
</html>

Run Example»Click the "Run Example" button to view the online example

The loop in this example uses a

while loop to display the cars array All values ​​in:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
	document.write(cars[i] + "<br>");
	i++;
}
</script>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance