鍵，循環3狀態改變

Question

我是新來的JS和課堂作業，需要工作：

當用戶點擊該按鈕高亮顯示應用CSS類所有其他li元素，所以你得到的顏色交替，並使圖像出現。

我無法使顏色更改切換到正常工作狀態，我也無法將圖像顯示出來。

<script> 

     var colors = new Array() 
     colors[0] = "#cc0099"; 
     colors[1] = "#a4c400"; 
     colors[2] = "#9900cc"; 

     var counter = 0; 

     window.onload = function() 
     { 
      var highlightBtn= document.getElementById("highlight_btn"); 
      highlightBtn.onclick = switchColors; 
     } 

     function switchColors() 
     { 
      var imgSrc = "images/" + [i]; 
      var changeLI = document.getElementsByClassName("change"); 
      changeLI.innerHTML = counter; 
      counter++;    
     } 

    </script> 

    <h1>Happy Mothers Day!</h1> 
    <h2>Things to get Mom:</h2> 

    <ul> 
     <li class="change">New Plants</li> 
     <li>Flowers</li> 
     <li class="change">A Day at the Spa</li> 
     <li>A Picture of Yourself</li> 
     <li class="change">New Shoes!</li> 
     <li>Anything with a Heart on It</li> 
     <li class="change"> Chocolate</li> 
    </ul> 

    <input id="highlight_btn" type="button" value="Highlight"> 

Answer 1

使用getElementsByClassName而不是getClass，它甚至沒有在文檔中定義。要更改顏色，請使用Element.style.color屬性。

var changeLi = document.getElementsByClassName("change"); 

for(var i = 0; i < changeLi.length; i ++) { 
    changeLi[i].style.color = colors[i]; 
}); 

Answer 2

你可以這樣做（它不清楚你想要的東西），但是這會告訴你原則。

HTML

<h1>Happy Mothers Day!</h1> 
<h2>Things to get Mom:</h2> 
<img id="mom" src=""> 
<ul> 
    <li class="change">New Plants</li> 
    <li>Flowers</li> 
    <li class="change">A Day at the Spa</li> 
    <li>A Picture of Yourself</li> 
    <li class="change">New Shoes!</li> 
    <li>Anything with a Heart on It</li> 
    <li class="change">Chocolate</li> 
</ul> 
<input id="highlight_btn" type="button" value="Highlight"> 

的Javascript

var colors = []; 
var images = []; 
var counter1 = 0; 
var counter2 = 0; 

colors.push("#cc0099"); 
colors.push("#a4c400"); 
colors.push("#9900cc"); 

images.push("http://imageshack.us/scaled/thumb/104/9071003006mini2lpl0.jpg"); 
images.push("http://imageshack.us/scaled/thumb/121/spirra.jpg"); 
images.push("http://imageshack.us/scaled/thumb/123/s4020001ret9qr.jpg"); 

function switchColors() { 
    var changes = document.getElementsByClassName("change"); 

    Array.prototype.forEach.call(changes, function (change) { 
     change.style.backgroundColor = colors[counter1]; 
    }); 

    counter1 += 1; 
    if (counter1 > colors.length - 1) { 
     counter1 = 0; 
    } 

    document.getElementById("mom").src = images[counter2]; 
    counter2 += 1; 
    if (counter2 > images.length - 1) { 
     counter2 = 0; 
    } 
} 

window.addEventListener("load", function() { 
    document.getElementById("highlight_btn").addEventListener("click", switchColors, false); 
}, false); 

上jsfiddle