We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Various Kind of For Loops</title>
<style>
section {
display: flex;
gap: 10;
justify-content: space-between;
}
section div.col {
width: calc(100% / 3);
}
button { margin-bottom: 10px; }
</style>
<script>
const num = [25, 45, 81, 64, 10, 46, 89, 49];
const product = {
title: 'Web template',
price: 'Free',
website: 'webgraphiz.com'
};
const site = "webgraphiz.com"
/* For Loop */
const fstLoop = () => {
for(let i = 0; i < num.length; i++) {
document.getElementById('loop1').innerHTML += num[i] + '<br />';
}
}
/* For In Loop */
const sndLoop = () => {
for(let j in product) {
document.getElementById('loop2').innerHTML += j + ":" + product[j] + '<br />';
}
}
/* For Of Loop */
const trdLoop = () => {
for(let k of site) {
document.getElementById('loop3').innerHTML += k + '<br />';
}
}
</script>
</head>
<body>
<section>
<div class="col">
<h3>For Loop</h3>
<button type="button" onclick="fstLoop()">Loop1</button>
<div id="loop1"></div>
</div>
<div class="col">
<h3>For In Loop</h3>
<button type="button" onclick="sndLoop()">Loop2</button>
<div id="loop2"></div>
</div>
<div class="col">
<h3>For Of Loop</h3>
<button type="button" onclick="trdLoop()">Loop3</button>
<div id="loop3"></div>
</div>
</section>
</body>
</html>