単純な背景の変更が動作しない

Question

これらの2つの機能が正しく動作しない理由を理解しようとしています。ボタン1をクリックするとバックグラウンドスタイルが青に変わり、ボタン2でクラス名が変わるようにしたいだけです。しかし、私はそれをフィドルで実証された方法でしたい。

誰かがこれが機能しない理由を説明できますか？私は今日新しい仕事に就いていましたが、構文エラーの可能性がある単純な修正だと思って、なぜうまくいかなかったのかを知りたいと思っています。任意の説明

var el = document.getElementByClassName('test'); 
 

 
function taskOne() { 
 
    alert('task 1 executed successfully'); 
 
    el.style.background="blue !important"; 
 
} 
 

 
function taskTwo() { 
 
    alert('task 2 executed successfully'); 
 
    el.className += " test-2"; 
 
}

.test { 
 
    background: lightgreen; 
 
} 
 

 
.test-2 { 
 
    background: orange !important; 
 
}

<div class="test">content</div> 
 
<div class="test">content 2</div> 
 
<div class="test">content 3</div> 
 
<div class="test">content 4</div> 
 
<div class="test">conten4t 5</div> 
 

 
<button onClick="taskOne()">Task 1</button> 
 

 
<button onClick="taskTwo()">Task 2</button>

Answer 1

まず、getElementsByClassNameではなく、getElementByClassNameです。そのクラス名を持つ要素の配列を返します。

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

 
function taskOne() { 
 
    for(let i = 0; i < elements.length; i++) { 
 
    let el = elements[i]; 
 
    el.style.backgroundColor = "blue"; 
 
    } 
 
} 
 

 
function taskTwo() { 
 
    for(let i = 0; i < elements.length; i++) { 
 
    let el = elements[i]; 
 
    el.className += " test-2"; 
 
    } 
 
}

.test { 
 
    background: lightgreen; 
 
} 
 

 
.test-2 { 
 
    background: orange !important; 
 
}

<div class="test">content</div> 
 
<div class="test">content 2</div> 
 
<div class="test">content 3</div> 
 
<div class="test">content 4</div> 
 
<div class="test">content 5</div> 
 

 
<button onClick="taskOne()">Task 1</button> 
 

 
<button onClick="taskTwo()">Task 2</button>

Answer 2

getElementByClassName（）のためのおかげで、単数形、存在しません。代わりに、getElement の ByClassName（）を使用してみてください。要素ではなく要素の配列を返すことに注意する必要があります。

Answer 3

VAR EL = document.getElementByClassName（ 'テスト'）。

正しいメソッド名はgetElementsByClassNameです。したがって、取得したTypeErrorです。

このメソッドは、そのクラス名を持つ要素の配列を返します。これは、すべての背景色を設定したい場合は、forを使ってループすることを意味します（正しいプロパティは、el.style.backgroundとは異なり、el.style.backgroundColorです）。 red。