teratail
回答率
85.47%
質問するログイン新規登録
トップJinjaに関する質問カードに背景画像をランダムに当てようとしているが、1個目のカード以外に画像が反映されない

編集履歴

回答編集履歴

6

　

2022/11/25 15:48

投稿

退会済みユーザー
test CHANGED
@@ -28,5 +28,5 @@
28
28
  </script>
29
29
  ```
30
30
  直した点：
31
- + id が要素ごとに同じになっている　→　要素ごとに一意のものにする。
31
+ + ループの結果 imgのid が全部同じものになっている　→　要素ごとに一意のものにする。
32
32
  + ループで同じ画像配列、同じスクリプトをいくつも生成してしまっている。 → 重複をなくす。

5

　

2022/11/25 15:47

投稿

退会済みユーザー
test CHANGED
@@ -27,3 +27,6 @@
27
27
  }
28
28
  </script>
29
29
  ```
30
+ 直した点：
31
+ + id が要素ごとに同じになっている　→　要素ごとに一意のものにする。
32
+ + ループで同じ画像配列、同じスクリプトをいくつも生成してしまっている。 → 重複をなくす。

4

　ｂ

2022/11/25 15:43

投稿

退会済みユーザー
test CHANGED
@@ -15,13 +15,13 @@
15
15
  {% endfor %}
16
16
 
17
17
  <script>
18
+ const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
19
+ "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
20
+ "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
21
+ "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
22
+ "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
18
23
  for (let i=0; i<{{ posts|length }}; i++){
19
24
  const imageArea = document.getElementById('imageArea'+i);
20
- const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
21
- "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
22
- "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
23
- "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
24
- "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
25
25
  const imageNo = Math.floor(Math.random() * images.length);
26
26
  imageArea.src = images[imageNo];
27
27
  }

3

　

2022/11/25 15:41

投稿

退会済みユーザー
test CHANGED
@@ -15,7 +15,7 @@
15
15
  {% endfor %}
16
16
 
17
17
  <script>
18
- for (let i=0; i<={{ posts|length }}; i++){
18
+ for (let i=0; i<{{ posts|length }}; i++){
19
19
  const imageArea = document.getElementById('imageArea'+i);
20
20
  const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
21
21
  "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",

2

　

2022/11/25 15:41

投稿

退会済みユーザー
test CHANGED
@@ -18,10 +18,10 @@
18
18
  for (let i=0; i<={{ posts|length }}; i++){
19
19
  const imageArea = document.getElementById('imageArea'+i);
20
20
  const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
21
- "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
21
+ "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
22
- "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
22
+ "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
23
- "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
23
+ "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
24
- "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
24
+ "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
25
25
  const imageNo = Math.floor(Math.random() * images.length);
26
26
  imageArea.src = images[imageNo];
27
27
  }

1

　

2022/11/25 15:40

投稿

退会済みユーザー
test CHANGED
@@ -17,11 +17,11 @@
17
17
  <script>
18
18
  for (let i=0; i<={{ posts|length }}; i++){
19
19
  const imageArea = document.getElementById('imageArea'+i);
20
- const images = ["https://placehold.jp/5dab9f/ffff00/200x200.png?text=A",
20
+ const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
21
+ "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
21
- "https://placehold.jp/5dab9f/ff00ff/200x200.png?text=B",
22
+ "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
22
- "https://placehold.jp/5dab9f/00ffff/200x200.png?text=C",
23
+ "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
23
- "https://placehold.jp/5dab9f/f00fff/200x200.png?text=D",
24
- "https://placehold.jp/5dab9f/fff00f/200x200.png?text=E"];
24
+ "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
25
25
  const imageNo = Math.floor(Math.random() * images.length);
26
26
  imageArea.src = images[imageNo];
27
27
  }