# VirtualMV/JavaScript/Iteration

Jump to: navigation, search

### Overview

 By the end of this page you will be able to: Understand how a radio button is created

## Commonly used iteration functions

Javascript iteration functions are very similar to those used in C++

The three commonly used iteration functions are:

while (condition) {……..}
for (initialisation, condition, increment) {……}
do {………} while (condition)

### while ... (js3_01)

<html>
<head><title>JavaScript (js3_01)</title></head>
<body>
<script type="text/javascript">
var intI = 0;
while (intI <= 5){
document.write("The number is " + intI);
document.write("<br />");
intI++;
}
</script>
<p>Explanation:</p>
<p><b>i</b>  equal to 0.</p>
<p>While <b>intI</b> is less than , or equal to, 5, <br />
the loop will continue to run.</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p>
</body>
</html>

Example :Click here to run js3_01.

### for ... (js3_02)

<html>
<head><title>JavaScript (js3_02)</title></head>
<body>
<script type="text/javascript">
for (intI = 0; intI <= 5; intI++){
document.write("The number is " + intI);
document.write("<br />");
}
</script>
<p>Explanation:</p>
<p>The for loop sets <b>intI</b>  equal to 0.</p>
<p>As long as <b>intI</b> is less than , or equal to, 5, <br/>
the loop will continue to run.</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p>
</body>
</html>

Example :Click here to run js3_02.

### do ...while (js3_03)

<html>
<head><title>JavaScript (js3_03)</title></head>
<body>
<script type="text/javascript">
intI = 0;
do {
document.write("The number is " + intI);
document.write("<br />");
intI++;
}
while (intI <= 5)
</script>
<p>Explanation:</p>
<p><b>intI</b>  equal to 0.</p>
<p>The loop will run</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p>
<p>While <b>intI</b> is less than , or equal to, 5, <br/>
the loop will continue to run.</p>
</body>
</html>

Example :Click here to run js3_03.

## Using an inline function

In the previous example the JavaScript was embedded in the code. How can you make the html/JavaScript easier to read? We can do this by separating the JavaScript from the html code by using a function. (This could be improved further by having the JavaScript stored in a linked .js file)

<html>
<head>
<title>JavaScript (js3_04)</title>
<script type="text/javascript">
function fnLoopy() {
for (intI = 0; intI <= 5; intI++){
document.write("The number is " + intI);
document.write("<br />");
}
}
</script>
</head>
<body>
<script type="text/javascript">fnLoopy();</script>
<p>Explanation:</p>
<p>The for loop sets <b>intI</b>  equal to 0.</p>
<p>As long as <b>intI</b> is less than , or equal to, 5, <br/>
the loop will continue to run.</p>
<p><b>intI</b> will increase by 1 each time the loop runs.</p>
</body>
</html>

Example :Click here to run js3_04.

## Exercises

### Exercise 1: Check box using iteration (js2_05 modified)

Modify the following program to use an iteration technique in fnCheck. Note the values have been changed to the cost of each item. Assume this is a daily order and only get none or one of each (e.g. you probably would by cream and sugar daily).

<html><body>
<script type="text/javascript">
<!--
function fnCheck() {
var strX = "";
objDrink=document.frmChoose.chkDrinks;
for(inti=0; inti<3; inti++)
{
if (objDrink[inti].checked) {strX = strX + objDrink[inti].value +" ";};
}
alert("You have selected: " +strX);
}

//-->
</script>
<form name="frmChoose">
<input type="checkbox" name="chkDrinks" value="2.50" />Milk<br />
<input type="checkbox" name="chkDrinks" value="4.50" />Cream<br />
<input type="checkbox" name="chkDrinks" value="2.00" />Sugar<br />
<input type="button" value="Order" onClick="fnCheck()" />
</form>
</body></html>

Example :Click here to run js2_05.

### References

 VirtualMV/JavaScript/Iteration. (2020). In WikiEducator/VirtualMV wiki. Retrieved October 24, 2020, from http:https://wikieducator.org/VirtualMV/JavaScript/Iteration    (zotero)