使用 onClick 更改计时器上多个元素的文本

Question

我有一个按钮，onClick 启动一个调用函数并传递计数器的计时器。我使用了一个警告框来查看我得到的计数器为 0。

如果计数器为 0，它应该用文本加载 table（它跳过它）它转到第二个 if 语句并且只加载第一个元素 Rep is 2?

我的代码：

 function startTimer(){
    counter =0;
        document.getElementById("RGlights").innerHTML = '<img src="../../images/Screen-Images/G-on-lighs.jpg" class="lightsRG" />';

     setInterval(function(){Hi(counter)},3000);

     function Hi(counter)
     {
                //alert('Hello ' + counter);

        while (counter < 3)
        {
        if (counter == 0)
        {
        document.getElementById("rep").innerHTML = "Rep: 1";
        document.getElementById("peak").innerHTML = "Peak: 549.3";
        document.getElementById("avg").innerHTML = "Avg: 575.25";
        //counter +=1;      
        }

        if (counter == 1)
        {       
        document.getElementById("rep").innerHTML = "Rep: 2";
        document.getElementById("peak").innerHTML = "Peak: 549.3";
        document.getElementById("avg").innerHTML = "Avg: 575.25";
        document.getElementById("RGlights").innerHTML = '<img src="../../images/Screen-Images/R-on-lighs.jpg" class="lightsRG" />';
        //counter +=1;

        } 
        else
       {
        document.getElementById("rep").innerHTML = "Rep: 3";
        document.getElementById("peak").innerHTML = "Peak: ";
        document.getElementById("avg").innerHTML = "Avg: ";
        document.getElementById("RGlights").innerHTML = '<img src="../../images/Screen-Images/R-G-off-lighs.jpg" class="lightsRG" />';
        document.getElementById("start").innerHTML =  '<img  src="../../images/Screen-Images/stop.jpg" width="165" height="63" border="0" /> ';
        }
            };
      counter +=1``
       }; /*   */

Answer 1

您的代码需要一些改进：

    function startTimer() {
        //counter is a global variable so Hi will have access to it, don't need to send it as a parameter
        var counter = 0; 
        document.getElementById("RGlights").innerHTML = '<img src="../../images/Screen-Images/G-on-lighs.jpg" class="lightsRG" />';
        //use setTimeout, setInterval will be calling Hi infinitely 
        setTimeout(Hi, 3000);

        function Hi() {                
            if (counter < 3) {
                if (counter == 0) {
                    document.getElementById("rep").innerHTML = "Rep: 1";
                    document.getElementById("peak").innerHTML = "Peak: 549.3";
                    document.getElementById("avg").innerHTML = "Avg: 575.25";
                    //counter +=1;
                }
                // use else if here, otherwise the else will be executed the first time when counter == 0
                else if (counter == 1) {
                    document.getElementById("rep").innerHTML = "Rep: 2";
                    document.getElementById("peak").innerHTML = "Peak: 549.3";
                    document.getElementById("avg").innerHTML = "Avg: 575.25";
                    document.getElementById("RGlights").innerHTML = '<img src="../../images/Screen-Images/R-on-lighs.jpg" class="lightsRG" />';
                    //counter +=1;

                }
                else {
                    document.getElementById("rep").innerHTML = "Rep: 3";
                    document.getElementById("peak").innerHTML = "Peak: ";
                    document.getElementById("avg").innerHTML = "Avg: ";
                    document.getElementById("RGlights").innerHTML = '<img src="../../images/Screen-Images/R-G-off-lighs.jpg" class="lightsRG" />';
                    document.getElementById("start").innerHTML = '<img  src="../../images/Screen-Images/stop.jpg" width="165" height="63" border="0" /> ';
                }
                counter += 1;
                //you need to recall setTimeout
                setTimeout(Hi, 3000);
            }
        }
    }

使用 onClick 更改计时器上多个元素的文本

Change the text of several elements on a timer with onClick

javascript

swap

element