Q&A
実現したいこと
Webサイト上で動く、くじ引きのプログラムを作成したいと思っています。
ボタンを押すたびにくじ引き結果とその結果に対応した画像を表示させたいです。
例えば、だるまのときは「だるま」の文字と「daruma.png」、こけしのときは「こけし」の文字と「kokeshi.png」といった具合にランダムで表示される文字に画像を紐付けて表示したいと思っています。
文字のみのくじ引きのプログラムはこちらのサイト（https://techacademy.jp/magazine/29972）を参考にjQueryを使って以下のように作成したのですが、くじ引き結果と画像をどのように紐付けて記述すればよいのかわかりません。
ご教授いただけないでしょうか。
該当のソースコード
html
1<html> 2 <body> 3 <button id="startButton">くじを引く</button> 4 <p><span id="result"></span></p> 5 <img src="" alt=""> 6 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 7 integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script> 8 <script> 9 var results = [ 10 "だるま", 11 "こけし", 12 "赤べこ" 13 ]; 14 // ボタンを押した際の動作 15 $('#startButton').on('click', function() { 16 var random = Math.floor( Math.random() * results.length ); 17 var result = results[random]; 18 $('#result').html(result); 19 }); 20 </script> 21 </body> 22</html>
回答1件
0
ベストアンサー
オブジェクトで持つと良いのでは
js
1var results = 2[ 3 { 4 name:"だるま" 5 ,image:"daruma.png" 6 },//省略 7];
results[random]でrandomが0なら
json
1{ 2 name:"だるま" 3 ,image:"daruma.png" 4 }
が取れるので、
名称取りたければ
result.name
画像名取りたければ
result.image
のようにアクセス。
投稿2021/06/29 07:42
編集2021/06/29 07:45
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/30 02:19