用javascript更改網格框的顏色

我正在嘗試學習javascript，並且使用其中的一些框作了網格，我試圖在點擊它時更改網格框的顏色。我知道我可以使用jQuery我做到了，工作，但我想用JavaScript來做到這一點只所以這是我到目前爲止的代碼：用javascript更改網格框的顏色

var grid = document.getElementsByClassName('box'); 

function changeColor(item) { 
    item.addEventListener('click', function() { 
    this.style.background = 'black'; 
    }); 
}; 

grid.forEach(function(el) { 
    changeColor(el); 
});

我覺得這需要「綁定」的方法，我不知道怎麼綁定工程還沒有完成，是否有可能使其工作沒有束縛？謝謝。

來源

2017-03-01 Reşit Körsu

您不必聲明一個單獨的函數。您可以使用box類捕獲所有元素，然後使用forEach()函數對它們進行迭代，並將click事件綁定到每個元素。

注意：網格變量不是數組。它是一個類似數組的對象。爲了能夠使用forEach()函數，必須使用Array#from將其更改爲數組。

var grid = document.getElementsByClassName('box'); 
 

 
Array.from(grid).forEach(v => v.addEventListener('click', function() { 
 
    v.style.background = 'black'; 
 
}));

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: lightgreen; 
 
    margin: 5px; 
 
}

<div class='box'></div> 
 
<div class='box'></div>

來源

2017-03-02 00:02:51

線grid.forEach是無效的。如果你打開你的瀏覽器的開發者控制檯，你會發現它引發了一個TypeError。如果您運行console.log(grid)，您會看到grid是HTMLCollection，而can't be iterated over using forEach。

可以轉換grid到數組先用Array.from(grid)，或使用[].forEach.call(grid, changeColor)

來源

2017-03-02 00:08:19 codehearts

用javascript更改網格框的顏色

回答

相關問題