通过遍历数组来更改innerHTML答案

【问题标题】：Changing innerHTML by looping through an array通过遍历数组来更改innerHTML
【发布时间】：2020-11-08 08:21:29
【问题描述】：

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

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

链接：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>

【问题讨论】：

我建议使用 reduce 与您的延迟和您用于锻炼的节点列表。您的 setTimeout() 嵌入在 reduce 函数中。每次 setTimeout() 完成时，reduce 都会触发并移动到下一个练习及其定义的时间（以秒为单位）delay。在 reduce 函数之前定义一个计数器并用它来识别节点列表 nodeList[i] 那么你的总延迟将需要增加 += 延迟...

标签： javascript arrays loops innerhtml

【解决方案1】：

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

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>

【讨论】：

感谢按钮的实现。这里有很多非常好的答案！

【解决方案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 只会在该元素已加载的情况下返回该元素，否则它将返回未定义的。为避免这种情况，请将脚本放在页面末尾或将所有内容放入 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];
        }
}

【讨论】：

嘿，Dcdanny 真的很喜欢你的回答！我只是好奇余数运算符在数组中是如何工作的。如果我按字面意思写它会是这样吗？ excercises.innerHTML = exerciseList[0%4]?
是的，没错。语法与任何其他数学运算符相同

【解决方案3】：

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

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

【讨论】：