JavaScriptを使ってグリッドボックスの色を変更する

Question

私はJavaScriptを学びたいと思っています。その中にいくつかのボックスでグリッドを作っています。クリックするとグリッドボックスの色を変えようとしています。だけなので、これはこれまでのところ私のコードである私は、私はjqueryのを使用することができます知っている私はそれをしなかったし、働いていたが、私はJavaScriptでこれをしたい：

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

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

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

これは「バインド」メソッドを必要とするように私は感じて、私はどのようにバインドを知りませんまだ動作しているのでバインドせずに動作させることは可能ですか？ありがとうございました。

Answer 1

別個の関数を宣言する必要はありません。 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>

Answer 2

ラインgrid.forEachが無効です。ブラウザの開発者コンソールを開くと、TypeErrorが発生するはずです。 console.log(grid)を実行すると、gridはHTMLCollectionであり、それはcan't be iterated over using forEachであることがわかります。

あなたが最初Array.from(grid)で配列にgridを変換し、または使用することができます[].forEach.call(grid, changeColor)