单击另一个元素时，更改javascript中一个元素的css样式

单击输入元素时，我想更改具有“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>

我将其插入html文件的末尾：

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

但它不起作用。我不得不犯一个错误，但我没有看到。。。

---

提前感谢。

文档。GetElementsByCassName（）

返回一个。要更新元素，必须指定索引

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

---

您的问题-GetElementsByCassName返回元素数组

只需使用：

---

el[0].style.backgroundColor='#cc0c8e'

您还可以使用
document.querySelector（'.input addon group'）
getElementsByClassName
el[0].style.backgroundColor
执行此操作，因为
getElementsByClassName
返回具有给定类名的元素数组。我认为您必须将[0]添加到el.style行中。它返回HTMLCollection（类似数组的项）
var el = document.getElementsByClassName('input-group-addon')[0];