无法切换背景图

Question

                   <div class="right" onclick="changeBgImage()">
                        <div class="pic1">PIC</div>
                        <div class="jieshao">
                            <h3>TITLE OF HIGHLIGHT</h3>
                            <h4>Short descriptions of the highlight on the left.</h4>

                        </div>
                        <div class="xiajiao">
                            <img src="images/xiajiao.png">
                        </div>
                    </div>
                    <script type="text/javascript">
                        function changeBgImage(){
                            document.getElementsByClassName('right').style.background = "url(images/pic-click.png)";
                        }
                    </script>

代码如上所示，想要实现当点击div时，背景图片变化了。。但是当我点击时并没有任何反应。

Answer 1

document.getElementsByClassName返回的是所有符合的class，类似一个数组对象，这里应该是document.getElementsByClassName('right')[0]

Answer 2

我没有测试过，可能出现的问题有2点：
1. script标签最好是在.right之前，不知道在之后会不会出现函数未定义的错误。
2. document.getElementsByClassName()这个方法的返回值是一个HtmlCollection对象，也就是一个数组，你对数组使用.style是有问题的。