質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

8667閲覧

javascript 配列を使った画像の表示

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/26 22:48

編集2017/08/26 23:22

こんにちは。初心者です。
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] + '&nbsp;' + 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] + '&nbsp;' + 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] + '&nbsp;' + 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] + '&nbsp;' + 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] + '&nbsp;' + 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>合計&nbsp;' + 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] + '&nbsp;' + hirumacal[food] + 'kカロリー<br>'; 96goukei = goukei + hirumacal[food]; 97*/ 98 99if (asamain ==0){ 100 hirumain = 1; /* もし朝の主菜がごはんなら、昼は強制的にパン*/ 101 hirumeshi += hiruma[1] + '&nbsp;' + hirumacal[1] + 'kカロリー<br>'; 102 goukei = goukei + hirumacal[1]; 103} else { 104 hirumain = 0; 105 hirumeshi += hiruma[0] + '&nbsp;' + 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] + '&nbsp;' + 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] + '&nbsp;' + 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

どなたかヘルプ頂けますと幸いです。

以上、宜しくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/08/26 22:58 編集

HTMLを追記していただけませんか?また、質問文のコードでは`showpic変数`は未定義のように見えるのですが、いかがでしょうか。
退会済みユーザー

退会済みユーザー

2017/08/26 23:23

ご返事ありがとうございます。追記を行いました。宜しくお願い申し上げます。
guest

回答1

0

ベストアンサー

的外れかもしれませんが、以下のような挙動でしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 img { 13 margin-right: 5px; 14 } 15 </style> 16</head> 17<body> 18<div id="showpic"></div> 19<script> 20 var mypic = new Array(2); 21 var showpic = document.getElementById("showpic"); 22 var flag = true; 23 24 for (var i = 0; i < mypic.length; i++) { 25 mypic[i] = "<img src='https://placehold.jp/3d4070/ffffff/150x150.png?text=images/test" + i + ".jpg'>"; 26 } 27 28 // 適当な条件分岐 29 if (flag) { 30 showpic.innerHTML += mypic[0]; 31 } else { 32 showpic.innerHTML += mypic[1]; 33 } 34</script> 35</body> 36</html>

投稿2017/08/26 23:49

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/08/27 01:04

わざわざコードまで書いて頂きまして、誠にありがとうございます。 おかげさまで、配列やループを使った画像表示に成功しました。 ところで、自分の元のプログラムに実装したところ、 配列[0]の画像の前に、"undefined"が表示されてしまっております(以下、キャプチャご参照)。 https://drive.google.com/file/d/0B6nqpqr3u9liT3NWajRocWdzT0U/view?usp=sharing 以下、そのコード(再掲)ですが、 asameshi = "" により、「朝 主菜」の前に"undefined"が表示されないようにすることには成功しております。 一方、一番下の行の asameshi += mypic[0]; の前に、また"undefined"が表示されてしまっております。 大変お手数ではございますが、この部分につき、 なにか解消法があるかお聞きしても宜しいでしょうか? 度々申し訳ございません。 function start(){ /* 写真の読み込み */ var mypic = new Array(2); for(var i=0;i<mypic.length;i++){ mypic[i] += "<img src='images/test" + i + ".jpg'>"; } /* 朝食の決定 */ var asama = ['ごはん','パン']; var asamacal = [300,400]; var max = 1, goukei = 0, asameshi = ""; asameshi += '朝 主菜<br>'; food = Math.floor(Math.random() * (max + 1)); asamain = food /* 主菜が何かを表す */ asameshi += asama[food] + '&nbsp;' + asamacal[food] + 'kカロリー<br>'; goukei = asamacal[food]; if (asamain == 0){ /* ごはんかパンかによっておかずが異なる。以下同様 */ asameshi += mypic[0];
s8_chu

2017/08/27 01:21

現状では原因を特定できないので、新しい質問として質問したほうが良いと思いますが、いかがでしょう。
Lhankor_Mhy

2017/08/27 01:40

横からすみません。 var mypic = new Array(2); ↑こちらは、[undefined,undefined]です。 ループで↓この処理をしていますが、 mypic[i] += "<img src='images/test" + i + ".jpg'>"; これは↓こうなると思います。 [undefined<img src='images/test0.jpg'>,undefined<img src='images/test1.jpg'>]
退会済みユーザー

退会済みユーザー

2017/08/27 03:32

s8_chuさま ご返事ありがとうございます。 replace文で、各配列にあったundefinedを個別に消すことで問題は解消されました。 色々なアドバイス、感謝しております。 Lhankor_Mhyさま 上述の通り、undifined を "" とすり替えることで、問題解決ができました。 どうもありがとうございました。
Lhankor_Mhy

2017/08/27 11:26

なるほど。 置換などせずに、加算代入(+=)ではなくて通常の代入(=)にすれば解決する話なのですが、とりあえず動くのであれば何よりです。
退会済みユーザー

退会済みユーザー

2017/08/28 12:53

アドバイスありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問