いくつかの試行後にJavascriptコードが動作しない

Question

私が作っているページでJSをテストしようとしています。私は新しいので、私は単純なものを試しています。どうやらそれは私にとっては難しいことです。ここではdivのための私のコードは次のとおりです。あなたがそれを必要とする場合はここで

<div class="ni"> 
    <div class="ni_image" onclick="changeColor()"> 
     <div class="text_box"> 
      <h3>Northern Ireland</h3> 
     </div> 
    </div> 
    <div class="ni_info"> 
     <p>info</p> 
    </div> 
</div> 

は、外側のdivのためのCSSです：

.ni { 
    width: 600px; 
    height: 220px; 
    display: block; 
    margin: 0px 0px 60px 0px; 
} 

そして、私は.ni_imageに変更しようとしているスタイル：

background-color: lightblue; 

このdivのその他のスタイル属性は、幅/高さ、表示、余白/パディングだけです。彼らが役に立ったらコメントして、私はそれらを追加します。

function changeColor() { 
document.getElementsByClassName('.ni_image').style.backgroundColor = "red"; 
} 

を私はStackOverflowのと他のフォーラムの負荷で見てきた、と私は何を読んでから、私は私が間違っているつもりです見当がつかない：最後にここに

は、JSは私がテストしていますです。ローカルの.jsファイルをheadタグのスクリプトタグにリンクしました。

ご協力いただければ幸いです。 getElementsByClassNameへの引数を提供する場合

Answer 1

あなたはドット

document.getElementsByClassName('ni_image') 

が含まれており、それはHTMLCollectionを返し覚えておく必要はありません。あなたは、配列も既に述べたよう https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

document.getElementsByClassName('ni_image')[0].style.backgroundColor = "red"; 

としてそれを使用する必要がありますので、

Answer 2

document.getElementsByClassName('ni_image')は、Arraylike HTMLCollectionを返し、あなたはこの機能でCSSセレクタを使用することはできませんので、ドットは必要ありません。

あなたはこの機能 http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp のマニュアルを確認することができ、それは、戻り値の型NodeListであり、その技術的にそれはArrayではありませんが、ほとんどのユースケースのために、それは1として扱うことができることを言います。

私が与えることができる簡単なヒント：関数は「getElementXXX」のようなものであればgetElementByIdで、それは、単一のオブジェクトを返しますし、それがgetElementsByClassNameまたはgetElementsByNameのように「getElementsXXX」と言うとき、それはNodeList

Answer 3

を返しますようにdocument.getElementsByClassNameはリストを返します。リストのstyleフィールドを設定すると何も起こりません。

あなたはそれを返し、リストをループする必要があります： ""

var elements = document.getElementsByClassName('ni_image'); 
elements.forEach(function(e) { 
    e.style.backgroundColor = "red"; 
}); 

Answer 4

であなたのクラス名を付加しないでください：

document.getElementsByClassName（ 'ni_image'）スタイル。backgroundColor = "赤";複数のように - あなたはあなたはそれが機能でElementsを言う気づけばgetElementsByClassName()によって返されるHTMLCollectionをループする必要があるだろうni_imageクラスを持つ複数のdiv秒を持っていると仮定すると

Answer 5

。これは、任意の数の要素にクラス名を適用できるため、これらの要素をすべて含むHTMLCollectionが常に返されるためです。

var elements = document.getElementsByClassName('ni_image'); 

for(var i = 0; i < elements.length; i++){ 
    elements[i].style.backgroundColor = "red"; 
} 

どちら[index]表記法を使用して、または.items(index)

Answer 6

document.getElementsByClassName()によってHTMLCollectionの要素にアクセスすることができ、所与のクラス名のすべてを持っているすべての子要素のアレイのようなオブジェクトを返す。（MDN）

試してみてください：
document.getElementsByClassName('ni_image')[0].style.backgroundColor = 'red';