は未定義

Question

のプロパティ「背景」を設定することはできません、私は次のエラーを取得する：

Uncaught TypeError: Cannot set property 'background' of undefined

は私が間違って何をしているのですか？

for(var n = 0; n < 5; n++) { 
 
    var heads='head'+n; 
 
    var image="images/"+heads+".jpg"; 
 
    console.log(heads);     
 
    document.getElementsByClassName('horse2').style.background="url("+image+")"; 
 
}

#results .horse1 { background-image: url(images/head1.png); } 
 
#results .horse2 { background-image: url(images/head2.png); } 
 
#results .horse3 { background-image: url(images/head3.png); } 
 
#results .horse4 { background-image: url(images/head4.png); }

<table id="results"> 
 
    <thead> 
 
    <tr> 
 
     <td>1st</td> 
 
     <td class="horse1"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1st</td> 
 
     <td class="horse2"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>1st</td> 
 
     <td class="horse3"></td> 
 
    </tr> 
 
    </thead> 
 
</table>

Answer 1

：あなたは、あなたがのgetElementsByClassNameセレクタは、あなたがこのようにコードを変更する、そのための指標を供給する必要があるので、配列を返すことに注意すべき

document.getElementsByClassName('horse2')[0].style.background="url('img-url')"; 

Answer 2

document.getElementsByClassName('horse2')これは素子のアレイを返します。 getElementsByClassName()方法は、すべてのコレクションを返します

var el = document.getElementsByClassName('horse2')[0]; 
el.style.background = "url("+image+")"; 

Answer 3

を使用する必要があります指定されたクラス名を持つドキュメント内の要素をNodeListオブジェクトとして返します。ノードはインデックス番号でアクセスできます。

あなたは、二つのことを注意することが重要である

document.getElementsByClassName('horse2')[0].style.background="url("+image+")"; 

Answer 4

Document.getElementsByClassName returns an array-like object of all child elements which have all of the given class names.

使用する必要があります。

1. 配列のようなオブジェクトがlengthプロパティとの定期的なオブジェクトであり、かつ連続的な数値を持つプロパティ名前は0から始まります。それ以外にも、通常の配列の他のメソッドはありませんが、それ自体はいくつかあります。
2. Document.getElementsByClassNameによって返される配列のようなオブジェクトは "live HTMLCollection"です。つまり、要素がDOMに追加され、DOMから削除されると、コレクションに追加されたり削除されたりします。

Document.getElementsByClassNameは、単独の要素を返すことはなく、常にライブHTMLCollectionを返します。

あなたはいくつかのオプション（小さな変化が言及されない場合があります）があります（しか各クラスの一つの要素が存在することになる場合は不要）コレクション

1. 反復を：

   var collection = document.getElementsByClassName('horse2'); 
   for(var i = 0; i < collection.length; ++i) { 
       collection[i].style.background = "url("+image+")"; 
   } 
   

2. 要素が1つしかない場合は、クラスの代わりにIDを使用し、document.getElementByIdを使用すると、指定されたIDを持つ単一の要素への参照が返されます。

   document.getElementById('horse1').style.background = "url("+image+")"; 
   

3. しかあり1つの要素である、あなたはクラスを使用する必要がありますが、具体的Document.getElementsByClassNameを使用する必要はありません、あなたの代わりに一致するドキュメント内の最初のElementを返す、Document.querySelectorを使用することができます場合は指定されたセレクタ、またはセレクタのグループ。そこしか一つの要素となり、あなたがDocument.getElementsByClassNameを使用する必要がある場合

   document.querySelectorAll('.horse1').style.background = "url("+image+")"; 
   

4. 、あなたは何をすることが起こらない場合は、

   document.getElementsByClassName('horse1')[0].style.background = "url("+image+")"; 
   

   しかし、コレクション内の最初の要素を選択するために、bracket notationを使用することができますコレクション内の要素は、選択する最初の要素がなくなり、同じエラーが再び発生します。