JavaScriptでボタンをタップしたら背景画像が切り替わるようにしたいです

JavaScript初心者です。以下質問内容です。

JavaScriptでボタンをタップしたら背景画像が切り替わるようにしたいです。

bg01.jpg → bg02.jpg → bg03.jpg → bg04.jpg

ボタンをタップする度に、上記のように背景画像が切り替わり、
bg04.jpgまできたら、またbg01.jpgに戻りループする形で実装したいです。

ネットで調べてみたのですが、当てはまるものが見つからないため質問しました。

下記が現状のコードです。わかる方いらっしゃいましたらアドバイスお願いします。

HTML
1<body> 
2    <div class="wrapper">
3　　　<input type="button" value="背景変更" onclick="">
4    </div>
5</body>

CSS
1.wrapper { 
2    background-image:url("../img/bg01.jpg");
3    background-size:cover;
4}
5

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

回答1件

ベストアンサー

例えばこんな感じでどうでしょうか?

HTML
1<input type="button" value="背景変更" onclick="func()">

Javascript
1// 切り替える画像を配列に入れておく
2const img = ['bg01.jpg', 'bg02.jpg', 'bg03.jpg', 'bg04.jpg'];
3let c = 0;
4
5function func() {
6  // 関数が読み込まれるたびにカウントアップ
7  c++;
8
9  // 画像の数を超えたらリセット
10  if (c >= img.length) c = 0;
11
12  // 要素を指定して背景画像のスタイルを変更
13  document.querySelector('.wrapper').style.backgroundImage = `url("${img[c]}")`;
14}

投稿2020/09/18 15:28

Create_NAYU

総合スコア101

treevillage

2020/09/19 03:44

早速ありがとうございます！ bgchange.jsを作成して、いただいたコードをかきました。最初上手く動作しなかったんですが、 const img = ['img/bg01.jpg', 'img/bg02.jpg', 'img/bg03.jpg', 'img/bg04.jpg']; このように指定したところ画像が切り替わりました。ですが、Googleの検証ツールを確認すると、 Uncaught SyntaxError: Identifier 'img' has already been declared このようなエラーが表示されています。現状問題なく動作してますが、原因わかりますでしょうか？度々申し訳ございません。よろしくお願いいたします。