Color-changing text on timer? (HTML)

Question

I need to make an HTML script with two buttons and some text, where the first button activates a loop timer, cycling through different colours of the text; the other button interrupts the timer.

I've tried to writhe the program with no luck:

<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>

Here, the button "Start/Resume cycle" is supposed to execute function startCycle() and the button "Stop cycle" the function stopCycle(), which start and stop the timer respectiveley.

The timer executes function changeColor which was designed to see which colour the "indicator" paragraph was showing, therefore recolouring the "title" division to the next colour in the list.

I guess I could have detected the actual colour of the "title" division instead of creating a new paragraph. That and a whole bunch of stuff I could have improved.

I even bet that I have done many wrong things here.

Thanks in advance for sparing your time!

UPDATE: I finally got it to work. view full code here:

<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

Line 31: } else if(document.getElementById("indicator"). == 'green') {

needs to be:

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

It was just a typo. Use the console inside your browser's developer tools to catch compile time errors like that.