こんにちは。初心者です。
javascriptに関して、教えて頂けますと幸いです。
以下のサンプルコードは、
配列mypicを作成
mypicに2枚の画像をfor文で代入
条件に応じて、変数showpicに代入する画像を決定
を意図しておりますが、上手く走りませんでした。
javascript
1var mypic = new Array(2); 2 for(var i=0;i<2;i++){ 3 mypic += "<img src='images/test" + i + ".jpg'>"; 4 } Preview 5 6 7/* 以下、showpicで[0]を表示するか[1]を表示するかを、条件分岐(省略)で表示する画像を決定*/ 8showpic += mypic[0]; 9showpic += mypic[1];
追記:
上記のコードは今回の説明用に実際のコードを簡略化して書いたものです。
実際のコード(js,html)は以下の通りです(jsは一部のみ)。
実際に使用している画像は多いのですが、
まだ配列を画像表示に応用することができていないため、
配列に代入しようとしている画像は、test0(mypic[0])とtest1(mypic[1])のみです。
js
1function start(){ 2 3/* 写真の読み込み */ 4 5 var mypic = new Array(2); 6 for(var i=0;i<2;i++){ 7 mypic += "<img src='images/test" + i + ".jpg'>"; 8 } 9 10/* 朝食の決定 */ 11 12 var asama = ['ごはん','パン']; 13 var asamacal = [300,400]; 14 var max = 1, goukei = 0, asameshi = ""; 15 16 asameshi += '朝 主菜<br>'; 17 food = Math.floor(Math.random() * (max + 1)); 18 asamain = food /* 主菜が何かを表す */ 19 asameshi += asama[food] + ' ' + asamacal[food] + 'kカロリー<br>'; 20 goukei = asamacal[food]; 21 22 if (asamain == 0){ /* ごはんかパンかによっておかずが異なる。以下同様 */ 23 /* asameshi += '<img src="images/gohan.jpg"><br>'; ここでご飯の画像を挿入 */ 24 asameshi += mypic[0]; 25 var asasub1 = ['焼き魚','納豆']; 26 var asasub1cal = [200,100]; 27 var max = 1; /* 以下、何回もmaxに任意の数値を代入するのは、メニューの数が増えることを想定してのもの */ 28 asameshi += '<br>朝 おかず1<br>'; 29 food = Math.floor(Math.random() * (max + 1)); 30 asameshi += asasub1[food] + ' ' + asasub1cal[food] + 'kカロリー<br>'; 31 if (food == 0){ 32 asameshi += '<img src="images/sakana.jpg"><br>'; 33 } else { 34 asameshi += '<img src="images/nattou.jpg"><br>'; 35 } 36 goukei = goukei + asasub1cal[food]; 37} else { 38 /* asameshi += '<img src="images/pan.jpg"><br>'; ここでパンの画像を挿入 */ 39 asameshi += mypic[1]; 40 var asasub2 = ['ハムエッグ','ソーセージ']; 41 var asasub2cal = [250,300]; 42 var max = 1; 43 asameshi += '<br>朝 おかず1<br>'; 44 food = Math.floor(Math.random() * (max + 1)); 45 asameshi += asasub2[food] + ' ' + asasub2cal[food] + 'kカロリー<br>'; 46 if (food == 0){ 47 asameshi += '<img src="images/hamegg.jpg"><br>'; 48 } else { 49 asameshi += '<img src="images/sausage.jpg"><br>'; 50 } 51 goukei = goukei + asasub2cal[food]; 52} 53 54if (asamain == 0){ 55 var asasmall1 = ['味噌汁','おしんこ']; 56 var asasmall1cal = [50,50]; 57 var max = 1; 58 asameshi += '<br>朝 おかず2<br>'; 59 food = Math.floor(Math.random() * (max + 1)); 60 asameshi += asasmall1[food] + ' ' + asasmall1cal[food] + 'kカロリー<br>'; 61 if (food == 0){ 62 asameshi += '<img src="images/misoshiru.jpg"><br>'; 63 } else { 64 asameshi += '<img src="images/oshinko.jpg"><br>'; 65 } 66 asagoukei = goukei + asasmall1cal[food]; 67} else { 68 var asasmall2 = ['チーズ','レタス']; 69 var asasmall2cal = [200,50]; 70 var max = 1; 71 asameshi += '<br>朝 おかず2<br>'; 72 food = Math.floor(Math.random() * (max + 1)); 73 asameshi += asasmall2[food] + ' ' + asasmall2cal[food] + 'kカロリー<br>'; 74 if (food == 0){ 75 asameshi += '<img src="images/cheese.jpg"><br>'; 76 } else { 77 asameshi += '<img src="images/leaf.jpg"><br>'; 78 } 79 asagoukei = goukei + asasmall2cal[food]; 80} 81 82asameshi += '<br>合計 ' + asagoukei + 'kカロリー'; 83 84/* 昼食の決定 */ 85 86var hiruma = ['ごはん','パン']; 87var hirumacal = [300,400]; 88var max = 1, goukei = 0, hirumeshi = ""; 89 90hirumeshi += '昼 主菜<br>'; 91 92/* 朝と昼の主菜が同じでも構わない場合は、ここを採用。その場合、この下のifから始まるコードは不採用 93food = Math.floor(Math.random() * (max + 1)); 94hirumain = food 95hirumeshi += hiruma[food] + ' ' + hirumacal[food] + 'kカロリー<br>'; 96goukei = goukei + hirumacal[food]; 97*/ 98 99if (asamain ==0){ 100 hirumain = 1; /* もし朝の主菜がごはんなら、昼は強制的にパン*/ 101 hirumeshi += hiruma[1] + ' ' + hirumacal[1] + 'kカロリー<br>'; 102 goukei = goukei + hirumacal[1]; 103} else { 104 hirumain = 0; 105 hirumeshi += hiruma[0] + ' ' + hirumacal[0] + 'kカロリー<br>'; 106 goukei = goukei + hirumacal[0]; 107} 108 109if (hirumain == 0){ 110 hirumeshi += '<img src="images/gohan.jpg"><br>'; 111 var hirusub1 = ['鳥のから揚げ','野菜炒め']; 112 var hirusub1cal = [400,250]; 113 var max = 1; 114 hirumeshi += '<br>昼 おかず1<br>'; 115 food = Math.floor(Math.random() * (max + 1)); 116 hirumeshi += hirusub1[food] + ' ' + hirusub1cal[food] + 'kカロリー<br>'; 117 if (food == 0){ 118 hirumeshi += '<img src="images/tori.jpg"><br>'; 119 } else { 120 hirumeshi += '<img src="images/itame.jpg"><br>'; 121 } 122 goukei = goukei + hirusub1cal[food]; 123} else { 124 hirumeshi += '<img src="images/pan.jpg"><br>'; 125 var hirusub2 = ['ハンバーグ','白身魚']; 126 var hirusub2cal = [300,200]; 127 var max = 1; 128 hirumeshi += '<br>昼 おかず1<br>'; 129 food = Math.floor(Math.random() * (max + 1)); 130 hirumeshi += hirusub2[food] + ' ' + hirusub2cal[food] + 'kカロリー<br>'; 131 if (food == 0){ 132 hirumeshi += '<img src="images/humberg.jpg"><br>'; 133 } else { 134 hirumeshi += '<img src="images/shiromi.jpg"><br>'; 135 } 136 goukei = goukei + hirusub2cal[food]; 137} 138 139以下、省略
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--IE対策--> 6<title></title> 7<meta name="viewport" content="width=device-width, initial-scale=1"> 8<meta name="description" content=""> 9<meta name="keywords" content=""> 10<link rel="stylesheet" href="css_template.css"> <!--cssファイル名--> 11<script type="text/javascript" src="js_template.js"></script> <!--jsファイル名--> 12</head> 13 14<body> 15 <div id="formarea"> 16 <form name="frm"> 17 <label>上限カロリーを設定して下さい<input type="text" name="maxcal" value=""></label> 18 <input type="button" value="スタート" id="calbtn"> 19 <input type="button" value="クリア" id="clrbtn"> 20 </form> 21 </div> 22 23 <div id="asaarea"></div> 24 <div id="hiruarea"></div> 25 <div id="yoruarea"></div> 26 <div id="sumarea"></div> 27</body> 28 29</html> 30
どなたかヘルプ頂けますと幸いです。
以上、宜しくお願い申し上げます。
回答1件
あなたの回答
tips
プレビュー