Changing innerHTML by looping through an array

Question

Hi I'm trying to create a small workout app. The app displays an exercise and a counter. I want to make the count reach the specified number (20), then have the loop move onto and display the next exercise in the array and reset the count back to 0. I'd like it to repeat this until all the exercises in the array have been displayed.

I would also really appreciate someone telling me where this went wrong.

link : https://codepen.io/jtog95/pen/zYrMpPB

var increasing = true;
var excercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var count = 0;
var specifiedNum = 20;
var exerciseList = ['Push-ups', 'Pulls-ups', 'Squats', 'Curls'];


var fnLoop = setInterval(exerciseLoop, 20000);


function exerciseLoop(){
    for(var i = 0; i < exerciseList.length; i++){
        exerciseList[i] = excercises.innerHTML;
        increasing === true ? count++ : count = 0;
        count = counter.innerHTML;
        if(count === specifiedNum) {
            count = 0;
            exerciseList[i] += 1;
            clearInterval(fnLoop);
        }
    }
}

    <div class="counter-container">
        <div id= 'counter' class="counter">0</div>   
    </div>

    <div class="exercisecontainer">
        <div class="currentexercise">Current Exercise: </div>
        <div id= 'exercises' class="exercises">Push-Ups</div>
    </div>

    <div class="buttoncontainer">
    <button id='start' class='start button'>Start</button>
    <button id='stop' class='stop button'>Stop</button>
    </div>

I suggest using reduce with your delay and the node list you are using for your workout. Your setTimeout() is embedded in the reduce function. Each time setTimeout() completes, reduce will fire and move to the next exercise and its defined time in seconds delay. Define a counter before the reduce function and used it to identify the node list nodeList[i] then your totaldelay will need to increment += delay... — dale landry
– dale landry, Commented Jul 18, 2020 at 19:11

Greg Brodzik · Accepted Answer · 2020-07-18 20:34:57Z

Added click handlers to HTML, in addition to iterating over exercises. Also added disabling/enabling of start button on appropriate events.

var excercises = document.getElementById("exercises");
var counter = document.getElementById("counter");
var startBtn = document.getElementById("start");
var count = 0;
var timeLimit = 20;
var exerciseList = ["Push-Ups", "Pulls-Ups", "Squats", "Curls"];
var exerciseIdx = 0;


function exerciseLoop() {
  startBtn.disabled = true;
  function iterateTimeAndExercise() {
    exercises.innerHTML = exerciseList[exerciseIdx];
    currInt = setInterval(updateTimeAndExercise, 1000);
    function updateTimeAndExercise() {
      if (count === timeLimit) {
        exerciseIdx++;
        count = 0;
        clearInterval(currInt);
        if (exerciseIdx === exerciseList.length) {
           exerciseIdx = 0;
           counter.innerHTML = count;
           exercises.innerHTML = exerciseList[exerciseIdx];
           startBtn.disabled = false;
           return;
         }
        iterateTimeAndExercise();
      } else {
          count++;
          counter.innerHTML = count;
      }
    }
  }
  iterateTimeAndExercise();
}

function stop() {
  clearInterval(currInt);
  startBtn.disabled = false;
}

<body>

<main class="main">
    <div class="counter-container">
        <div id= 'counter' class="counter">0</div>   
    </div>

    <div class="exercisecontainer">
        <div class="currentexercise">Current Exercise: </div>
        <div id= 'exercises' class="exercises">Push-Ups</div>
    </div>

    <button onClick="exerciseLoop()" id='start' class='start button'>Start</button>
    <button id='stop' class='stop button' onClick="stop()">Stop</button>

</main>
    
    <script src="./script.js"></script>
</body>

Thanks appreciate implementation of the buttons. Lots of really good answers here!

Dcdanny · Accepted Answer · 2020-07-18 19:36:21Z

1

I've made a few changes to your code below. Just a few suggestions:

You've reversed the order of = association in your code;

var a = "foo";
var b = "bar";
a = b;
//Now a and b are both "bar"

You don't need a for loop as well as your timed incrementing counter
After 4 loops your array runs out of items. Using count%exerciseList.length means when you reach count == 4 you will jump back to the first element of the array
Added a second counter exerciseCount but not a second interval
Removed the line exerciseList[count] += 1;. I'm not sure what you're trying to do there.
Loading dom elements: document.getElementById will only return an element if that element has already been loaded, or it will return undefined. To avoid this put the script at the end of the page or put everything inside document.onload = function(){myScript}

Corrected code:

var increasing = true;
var excercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var count = 0;
var exerciseCount = 0;
var specifiedNum = 20;
var exerciseList = ['Push-ups', 'Pulls-ups', 'Squats', 'Curls'];


var fnLoop = setInterval(exerciseLoop, 1000);


function exerciseLoop(){
        increasing === true ? count++ : count = 0;
        counter.innerHTML = count;
        if(count === specifiedNum) {
            count = 0;
            counter.innerHTML = count;
            exerciseCount++
            excercises.innerHTML = exerciseList[exerciseCount%exerciseList.length];
        }
}

edited Jul 18, 2020 at 19:36

answered Jul 18, 2020 at 19:17

Dcdanny

4792 silver badges8 bronze badges

2 Comments

Jamesyt60 Over a year ago

Hey Dcdanny really like your answer! I was just curious how the remainder operator worked in the array. If i wrote it in literal terms would it look like this? excercises.innerHTML = exerciseList[0%4]?

Dcdanny Over a year ago

Yep, thats right. The syntax is the same as any other mathematical operator

Philipp Molitor · Accepted Answer · 2020-07-18 19:19:20Z

You need two different intervals callbacks:

var increasing = true;
var excercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var ex = 0;
var count = 0;
var specifiedNum = 20;
var exerciseList = ['push-ups', 'pulls-ups', 'squats', 'curls'];

var fnCounter;

exerciseLoop();

function exerciseLoop(){
    exercises.innerHTML = exerciseList[count];
    if (ex < exerciseList.length - 1) {
      ex++;
      fnCounter = setInterval(incrementCounter, 1000)
    } else {
      ex = 0;
    }
  
    console.log(ex);
}

function incrementCounter() {
  if(count < specifiedNum) {
    console.log("increment", count);
    count++;
    counter.innerHTML = count.toString();
  } else {
    clearInterval(fnCounter);
    count = 0;
    exerciseLoop();
  }
}

Collectives™ on Stack Overflow

Changing innerHTML by looping through an array

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related