计时器上的换色文字？ （HTML）

Question

我需要制作一个带有两个按钮和一些文本的HTML脚本，其中第一个按钮激活循环计时器，循环显示文本的不同颜色;另一个按钮会中断计时器。

我试图在没有运气的情况下编写程序：

<button type="button" onclick="startCycle()">Start/Resume cycle</button>
<button type="button" onclick="stopCycle()">Stop cycle</button>
<div id="title">Colormatic!</div>

It is currently
<p id="indicator"></p>

<script>

var timerId;
var color = 0;

var colors = ['blue', 'green', 'yellow'];
document.getElementById("title").style.color = colors;

document.getElementById("indicator").innerHTML = colors;

function startCycle() {
    timerId = setInterval(changeColor, 1000);
}

function stopCycle() {
    clearInterval(timerId);
    timerId = null;
}

function changeColor() {
    if(document.getElementById("indicator").innerHTML == 'blue') {
        document.getElementById("title").style.color = colors[1];
        document.getElementById("indicator").innerHTML = colors[1];
    } else if(document.getElementById("indicator"). == 'green') {
        document.getElementById("title").style.color = colors[2];
        document.getElementById("indicator").innerHTML = colors[2];
    } else {
        document.getElementById("title").style.color = colors[0];
        document.getElementById("indicator").innerHTML = colors[0];
    }
}

</script>

这里，按钮＆＃34;开始/恢复循环＆＃34;应该执行函数startCycle()和按钮＆＃34;停止循环＆＃34;函数stopCycle()，用于启动和停止计时器。

计时器执行功能changeColor，该功能旨在查看＆＃34;指示符＆＃34;段落显示，因此重新标题＆＃34;标题＆＃34;划分到列表中的下一个颜色。

我想我可以检测到＆＃34;标题＆＃34;的实际颜色。分裂而不是创建一个新的段落。那和我可以改进的一大堆东西。

我甚至打赌我在这里做了很多错事。

提前感谢您节省时间！

更新：我终于开始工作了。在这里查看完整代码：

<button type="button" onclick="startCycle()">Start/Resume cycle</button>
<button type="button" onclick="stopCycle()">Stop cycle</button>
<div id="title">Colormatic!</div>
It is currently
<span id="indicator">blue</span>

<script>

var timerId;

var ind = document.getElementById("indicator");
var tit = document.getElementById("title");
var color = ["red"]

function startCycle() {
    timerId = setInterval(changeColor, 500);
}

function stopCycle() {
    clearInterval(timerId);
    timerId = null;
}

function changeColor() {
    if (ind.innerHTML == 'blue') {
        tit.style.color = 'green';
        ind.innerHTML = 'green';
    }

    else if (ind.innerHTML == "green") {
        tit.style.color = 'yellow';
        ind.innerHTML = "yellow";
    }

    else {
        tit.style.color = 'blue';
        ind.innerHTML = "blue";
    }
}

</script>

Answer 1

第31行：} else if(document.getElementById("indicator"). == 'green') {

需要：

} else if(document.getElementById("indicator").innerHTML == 'green') {

这只是一个错字。使用浏览器开发人员工具中的控制台来捕获编译时错误。