Zamanlayıcıda renk değiştiren metin var mı? (HTML)

Question

Birkaç haftadan beri kodlama kurslarım var ve önümüzdeki cumartesi için bazı ödevler verildim:

İki düğmeli bir HTML betiği ve ilk düğmenin etkinleştirildiği bazı metinler oluşturun metnin farklı renklerinden bisiklet süren bir döngü zamanlayıcısı; diğer düğme zamanlayıcıyı keser.

hayır şans ile programı kıvranmak denedim:

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

Burada, düğme "Başlat/Devam döngüsü" işlevini startCycle() ve düğme "Dur döngüsünü" fonksiyonunu stopCycle() yürütmek gerekiyordu, zamanlayıcı saygısını başlatan ve durduran.

Zamanlayıcı, "gösterge" paragrafının hangi renkte gösterildiğini görmek için tasarlanan changeColor işlevini çalıştırır, bu nedenle "başlık" bölümünün listedeki bir sonraki renge yeniden yüklenmesini sağlar.

ben yerine yeni bir paragraf oluşturma "başlığı" bölünme gerçek rengini tespit ettik sanırım. Bu ve bir sürü şeyi geliştirebilirdim.

Hatta burada birçok yanlış şey yaptığımı iddia ediyorum.

Zaman ayırdığınız için şimdiden teşekkür ederiz!

GÜNCELLEME: Sonunda o iş için var. Burada tam kodunu görüntülemek:

<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

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

ihtiyacı olması:

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

Sadece bir yazım hatası oldu. Derleme zamanı hatalarını yakalamak için tarayıcınızın geliştirici araçlarındaki konsolu kullanın.