Let's use functions to call loops and influence their output.
This app for example uses a loop inside a function to guide you during a workout. Press the button to call the function.
<html> <head> <style> body { text-align: center; font-size: 16px; margin: 0 auto; /* background-color: lightblue; */ } button { background-color: #85C1E9; border: none; border-radius: 8px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; padding: 6px 12px; margin: 0 12px 0 0; outline: none; } h2 { color: #7c795d; font-family: 'Trocchi', serif; font-size: 45px; font-weight: normal; line-height: 48px; margin: 0; text-align: centre } #playerList { text-align: left; } </style> </head> <body id="main"> <h2>Adaptive workout</h2> <p><label>10 Reps</label></p> <button id="workout" onClick="exerciseCount()">Start workout</button> <h2 style="margin:30px;"> <span style=" font-size:36px; font-weight:bold;" id="output"></span><h2> <script> function exerciseCount() { document.getElementById("workout").disabled = true; var reps = 10; if(reps === 0) { document.getElementById("output").innerHTML = "Add a number!"; } else { var i = 1; function myLoop() { setTimeout(function() { document.getElementById("output").innerHTML = "Rep " + i; i++; if (i <= reps) { myLoop(); if (i === reps) { document.getElementById("workout").disabled = false; } } }, 1000) } myLoop(); } } </script> </body> </html>]]>