別の要素をクリックするとjavascriptの1つの要素のCSSスタイルを変更します

Question

入力要素をクリックすると、 "input-group-addon"クラスを持つdivの背景を変更します：

<div class="form-group col-sm-12 col-md-5"> 
    <label class="sr-only" for="exampleInputEmail">Email address</label> 
    <div class="input-group" > 
     <div class="input-group-addon"> 
      <img src="pictures/email.png" alt="Email" /> 
     </div> 
     <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email Adress" onclick="changeBackground()"> 
    </div> 
</div> 

私はjavascriptのファイルbackground.jsを作成します。

function changeBackground() { 
    var el = document.getElementsByClassName('input-group-addon'); 
    el.style.backgroundColor = "#cc0c8e"; 
} 

と私はhtmlファイルの最後に挿入された：

<script src="js/background.js"></script> 

しかし、それは動作しません。私は間違いをしなければなりませんでしたが、私はそれを見ませんでした... ありがとうございます。

Answer 1

document.getElementsByClassName()は、array-like objectを返します。要素を更新するには、インデックスを指定する必要があります。

var el = document.getElementsByClassName('input-group-addon')[0]; 

Answer 2

あなたの問題 - のgetElementsByClassNameは、要素

の配列を返すだけでそれを行う： el[0].style.backgroundColor = '#cc0c8e';

そして、あなたはまた、document.querySelector('.input-addon-group')代わり getElementsByClassName