Q&A
前提
htmlとjavascriptについての質問です。
flaskを使ってtodoリストを作っています。
作った各タスクをカードに分けて、そのカードに背景画像をランダムに当てようとしているのですが、1個目のタスク以外に画像が反映されません。
実現したいこと
1個目以外のタスクにも画像がランダムに反映されるようにしたいです。
発生している問題・エラーメッセージ
該当のソースコード
<div class="container"> {% for post in posts %} <div class="d-inline-flex"> <!-- タスクカードの情報 --> <div class="card text-white"> <!-- ランダムに画像をあてる --> <img class="card-img" id="imageArea"> <script> const imageArea = document.getElementById('imageArea'); const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg", "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg", "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg", "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg", "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ]; const imageNo = Math.floor(Math.random() * images.length) imageArea.src = images[imageNo]; </script> </div> </div> {% endfor %}
試したこと
document.write('<img src="images/'+ ~ +'.jpg" />'); みたいなのを使って画像をあててみましたが、それだと画像のサイズがcssで指定したものと違った画像が出てきてしまいました。
補足情報(FW/ツールのバージョンなど)
python3.9.6
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/11/26 17:21