CODEWITHSUNDEEP
javascriptarraysloopsinnerhtml
Jamesyt60
Jamesyt60

Reputation: 67

Changing innerHTML by looping through an array

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>

Upvotes: 1

Views: 1020

Answers (3)

Greg Brodzik
Greg Brodzik

Reputation: 1817

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>

Upvotes: 1

Dcdanny
Dcdanny

Reputation: 479

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

  1. 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"
  2. You don't need a for loop as well as your timed incrementing counter
  3. 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
  4. Added a second counter exerciseCount but not a second interval
  5. Removed the line exerciseList[count] += 1;. I'm not sure what you're trying to do there.
  6. 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];
        }
}

Upvotes: 1

Philipp Molitor
Philipp Molitor

Reputation: 387

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();
  }
}

Upvotes: 0

Related Questions