Let's learn the basics of using and controlling loops inside functions.

See this example that displays a custom number of workout repetitions? It uses a parameter to tell the loop how many times to run.

<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; outline: none; margin: 0 12px 0 0; } 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>Reps</label> <input id="reps" type="number" placeholder="10" value="10" > </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 = document.getElementById("reps").value; 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-1) { document.getElementById("workout").disabled = false; } } }, 1000) } myLoop(); } } </script> </body> </html>]]>