teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

誤字修正

2021/06/21 04:35

投稿

digitalhimiko
digitalhimiko

スコア142

answer CHANGED
@@ -13,8 +13,8 @@
13
13
  console.log(img);
14
14
  img[0].src = arr[1];
15
15
  ```
16
- ※それからfor文の中で何度も変数をletで宣言するのはやめておきましょう。
17
16
 
17
+
18
18
  こうすると画像がちゃんと切り替わること確認できますよね。
19
19
 
20
20
  まずはこういう形で実験してみましょう!

3

追記部分追加

2021/06/21 04:35

投稿

digitalhimiko
digitalhimiko

スコア142

answer CHANGED
@@ -17,4 +17,30 @@
17
17
 
18
18
  こうすると画像がちゃんと切り替わること確認できますよね。
19
19
 
20
- まずはこういう形で実験してみましょう!
20
+ まずはこういう形で実験してみましょう!
21
+
22
+ [追記]
23
+ HTMLのimgタグにidを追加してみることで楽にDOMを指定できるようにしてみました。
24
+ ```
25
+ <!--<img>にidを追加しています。-->
26
+ <a href="service.html"><img id="change_img" class="big-bg" src="images/main_img01.png"></a>
27
+ ```
28
+
29
+ ```
30
+ const arr = new Array("images/main_img01.png","images/main_img02.png","images/main_img03.png");
31
+ let num=0;
32
+ //let img = document.getElementById("big-bg");
33
+ let img = document.getElementById("change_img");
34
+ console.log(img);
35
+ setInterval(()=>{
36
+ if (num === 2) {
37
+ num = 0;
38
+ }
39
+ else{
40
+ num++;
41
+ }
42
+ img.setAttribute('src', arr[num]); // img.src=と同じ意味です。
43
+ }
44
+ ,5000)
45
+
46
+ ```

2

投稿修正

2021/05/16 03:27

投稿

digitalhimiko
digitalhimiko

スコア142

answer CHANGED
@@ -1,11 +1,20 @@
1
- ## Ans. src属性書き換えにはsetAttribute メソッドを使ってみましょう。
1
+ ## Ans. DOM取得がうまくいっていないよです
2
2
 
3
3
  コンソールには確かにconsole.logの結果が表示されてsrcが書き換わっているように見えますが、
4
4
  ![イメージ説明](b9393b62b919978d8721d9b97e224fa2.png)
5
5
  上記のElementをみるとどうやら書き換えができていないようです。
6
6
 
7
- 下記の参考サイトにあるようにsetAttribute メソッドを使ってみましょう。
7
+ いう場合はまずfor文で回す前一回だけの処理だけでちゃんと動くか確認してみましょう。
8
+ 例えば、、、
9
+ ```
10
+ const arr = new Array("images/main_img01.png","images/main_img02.png","images/main_img03.png");
11
+ let num=0;
12
+ let img = document.getElementsByClassName("big-bg"); // ここでDOMの取得を変えてみました。
13
+ console.log(img);
14
+ img[0].src = arr[1];
15
+ ```
8
16
  ※それからfor文の中で何度も変数をletで宣言するのはやめておきましょう。
9
17
 
10
- ※参考サイト
11
- [JavaScript で src 属性の値を取得・変更する](http://sarchitect.net/10364)
18
+ こうすると画像がちゃんと切り替わること確認できますよね。
19
+
20
+ まずはこういう形で実験してみましょう!

1

letについて追記

2021/05/16 03:22

投稿

digitalhimiko
digitalhimiko

スコア142

answer CHANGED
@@ -5,6 +5,7 @@
5
5
  上記のElementをみるとどうやら書き換えができていないようです。
6
6
 
7
7
  下記の参考サイトにあるようにsetAttribute メソッドを使ってみましょう。
8
+ ※それからfor文の中で何度も変数をletで宣言するのはやめておきましょう。
8
9
 
9
10
  ※参考サイト
10
11
  [JavaScript で src 属性の値を取得・変更する](http://sarchitect.net/10364)