[javascript]Web上で画像の切り替えが反映されない

前提・実現したいこと

一定時間ごとに画像が切り替わるプログラムを作りたいです。

発生している問題・エラーメッセージ

コンソール上では画像のURLが切り替わっているのですが、web上では画像が変わりません。

該当のソースコード

HTMl/javascript

HTMl/javascript
1<body>
2    <div id="home">
3      <a href="service.html"><img class="big-bg" src="images/main_img01.png"></a>
4
5    </div>
6  <script>
7
8  const arr = new Array("images/main_img01.png","images/main_img02.png","images/main_img03.png");
9  let num=0;
10
11  setInterval(()=>{
12  if (num === 2) {
13  num = 0;
14  }
15  else{
16  num++;
17  }
18  let img=document.getElementById("home");
19  img.src=arr[num];
20
21console.log(img.src);
22}
23,5000)
24</script>
25</body>

試したこと

画像のリンクの確認、コンソール上では表示されるかどうか、その他のエラーがないことの確認

補足情報（FW/ツールのバージョンなど）

使用ツール：Atom
ブラウザ：Googolechorm

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

回答1件

ベストアンサー

Ans. DOMの取得がうまくいっていないようです。

コンソールには確かにconsole.logの結果が表示されてsrcが書き換わっているように見えますが、

上記のElementをみるとどうやら書き換えができていないようです。

こういう場合はまずfor文で回す前に一回だけの処理だけでちゃんと動くか確認してみましょう。
例えば、、、

const arr = new Array("images/main_img01.png","images/main_img02.png","images/main_img03.png");
let num=0;
let img = document.getElementsByClassName("big-bg"); // ここでDOMの取得を変えてみました。
console.log(img);
img[0].src = arr[1];

こうすると画像がちゃんと切り替わること確認できますよね。

まずはこういう形で実験してみましょう！

[追記]
HTMLのimgタグにidを追加してみることで楽にDOMを指定できるようにしてみました。

<!--<img>にidを追加しています。-->
<a href="service.html"><img id="change_img" class="big-bg" src="images/main_img01.png"></a>

const arr = new Array("images/main_img01.png","images/main_img02.png","images/main_img03.png");
let num=0;
//let img = document.getElementById("big-bg");
let img = document.getElementById("change_img");
console.log(img);
setInterval(()=>{
	if (num === 2) {
		num = 0;
	}
	else{
		num++;
	}
	img.setAttribute('src', arr[num]); // img.src=と同じ意味です。
}
	,5000)

投稿2021/05/16 03:07

編集2021/06/21 04:35