【JavaScript】onClickでCSSのbackgroundを変更するには

htmlのボタンをクリックして、要素の背景画像を変更したいと思います。
背景画像はcssのbackground-imageを使用します。
背景を適用する対象はHTMLのdivです。（HTMLで背景画像は設定しないことにします）

そしてコードを書きましたが実行しても背景が変わりません。
どこが間違っているのでしょうか？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
        #xxxx {
            background-image: url(A.png);
            width: 200px;
            height: 120px;
        }
    </style>
    <SCRIPT type="text/javascript">
        function change_B() {
            document.getElementById('xxxx').style.backgroundimage = url("B.png");
        }
        function change_D() {
            document.getElementById('xxxx').style.backgroundimage = url("D.png");
        }
    </script>
    </head>
    <body>
        <div id="xxxx">
            ここで背景が変わる
        </div>
        <p>
            <input type="button" value="背景はBに変更" onclick="change_B">
            <input type="button" value="背景はDに変更" onclick="change_D">
        </p>
    </body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

これで行けました。変更点だけ記載します。
(Firefox最新版で確認済み)
具体的には
backgroundImage：Iが大文字
'url("B.png")'：　''で囲う
onclick="change_B()"： onclickスペル訂正＆()追加

html
1    <SCRIPT type="text/javascript">
2        function change_B() {
3            document.getElementById('xxxx').style.backgroundImage = 'url("B.png")';
4        }
5        function change_D() {
6            document.getElementById('xxxx').style.backgroundImage = 'url("D.png")';
7        }
8    </script>
9

html
1            <input type="button" value="背景はBに変更" onclick="change_B()">
2            <input type="button" value="背景はDに変更" onclick="change_D()">
3

投稿2018/09/05 06:06

編集2018/09/05 06:08

ponzu1990

総合スコア57

_L9u7c4i0a

2018/09/05 07:33

ご回答いただきありがとうございますおかげで実行できました！細かいところが色々出来ていなかったのですね。（）をよく忘れるので注意しようと思います。

ponzu1990

2018/09/05 07:36

うまく動いたようで何よりです、これからもプログラム作成楽しんでください〜(・ω・)

行動規範の内容に同意します

たとえばclassを付け替えてみるとか

javascript
1<style>
2#xxxx {
3width: 200px;
4height: 120px;
5}
6
7#xxxx.a{background-Image:url(1.jpg);}
8#xxxx.b{background-Image:url(2.jpg);}
9#xxxx.c{background-Image:url(3.jpg);}
10
11</style>
12<script>
13function change(n) {
14  with(document.getElementById('xxxx').classList){
15    ['a','b','c'].forEach(function(x){remove(x)});//IE対策
16    add(n);
17  }
18}
19</script>
20
21<div id="xxxx" class="a">
22ここで背景が変わる
23</div>
24<p>
25<input type="button" value="背景はAに変更" onclick="change('a')">
26<input type="button" value="背景はBに変更" onclick="change('b')">
27<input type="button" value="背景はCに変更" onclick="change('c')">
28</p>