JAVASCRIPT NESTED LOOP
Loops in any programming language are used to implement certain instructions multiple times automatically. Why do you think is there a need for loops if we can manually give instructions? For less number of instructions, we can manage without using loops but to give a large set of the same instructions, loops become inevitable. You would have for sure heard about loops but what are these nested loops?
A loop within another loop is known as a nested loop. Generally, in loops, we will have only one statement that gets executed until the condition is satisfied. In the case of nested for loops, we will have conditions and statements of multiple loops. Shown below is what a nested for loop in JavaScript looks like
for (initialization; condition; increment)
{
for (initialization; condition; increment)
{
code to be executed
}
}
Example-Nested for Loop
<html><body>
<h3> The nested for loop in JavaScript</h3>
<p> Enter number of rows and columns to create matrix</p>
<form>
<label>Rows : </label>
<input type = "text" id = "rows">
<label > Columns : </label>
<input type = "text" id = "cols">
<input type = "button" onclick = "demo()" value = "Create Matrix">
</form>
<div id="result"></div>
<script>
function demo()
{
var text = "";
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
for(let i = 0 ; i < rows; i++){
for(let j = 0 ; j < cols ; j++){
text += "#"
}
text += "<br>";
}
document.getElementById("result").innerHTML = text;
}
</script>
</body>
</html>
Output
The nested for loop in JavaScript
Enter number of rows and columns to create matrix
Example-Nested while Loop
<html><body>
<h3> The nested while loop in JavaScript</h3>
<p> Enter number of rows and columns to create matrix</p>
<form>
<label>Rows : </label>
<input type = "text" id = "rows">
<label > Columns : </label>
<input type = "text" id = "cols">
<input type = "button" onclick = "demo()" value = "Create Matrix">
</form>
<div id="result"></div>
<script>
function demo()
{
var text = "";
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
let i=0;
while(i< rows)
{
let j=0;
while(j< cols)
{
text += "#";
j++;
}
text += "<br>";
i++;
}
document.getElementById("result").innerHTML = text;
}
</script>
</body>
</html>
Example-Nested do while Loop
<html><body>
<h3> The nested do while loop in JavaScript</h3>
<p> Enter number of rows and columns to create matrix</p>
<form>
<label>Rows : </label>
<input type = "text" id = "rows">
<label > Columns : </label>
<input type = "text" id = "cols">
<input type = "button" onclick = "demo()" value = "Create Matrix">
</form>
<div id="result"></div>
<script>
function demo()
{
var text = "";
var rows = document.getElementById("rows").value;
var cols = document.getElementById("cols").value;
let i=0;
do
{
let j=0;
do
{
text += "#";
j++;
}while(j < cols);
text += "<br>";
i++;
}while(i < rows);
document.getElementById("result").innerHTML = text;
}
</script>
</body>
</html>