通过遍历数组更改 innerHTML

Question

您好，我正在尝试创建一个小型锻炼应用程序。该应用程序显示一个练习和一个计数器。我想让计数达到指定的数字 (20)，然后让循环继续并显示数组中的下一个练习并将计数重置回 0。我希望它重复这个直到所有练习都在数组已显示。

我也非常感谢有人告诉我哪里出了问题。

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>

Answer 1

您需要两个不同的时间间隔回调：

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

Answer 2

我对下面的代码做了一些更改。只是一些建议：

您在代码中颠倒了 = 关联的顺序；

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

您不需要 for 循环以及定时递增计数器
4 次循环后，您的数组中的项目用完了。使用 count%exerciseList.length 意味着当您到达 count == 4 时，您将跳回到数组的第一个元素
添加了第二个计数器exerciseCount但没有添加第二个间隔
删除了行 exerciseList[count] += 1;。我不确定你想在那里做什么。
正在加载 dom 元素：document.getElementById 只会 return 一个元素，如果该元素已经被加载，否则它将 return 未定义。为避免这种情况，请将脚本放在页面末尾或将所有内容放在 document.onload = function(){myScript}

更正后的代码：

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];
        }
}

Answer 3

除了迭代练习外，还向 HTML 添加了点击处理程序。还在适当的事件上添加了 disabling/enabling 开始按钮。

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>

通过遍历数组更改 innerHTML

Changing innerHTML by looping through an array

javascript

arrays

loops

innerhtml