Q&A
picList[i]; iに数字はいってます？
前提・実現したいこと
以前こちらでご質問させていただいたことに
関連する質問となり恐縮です。
https://teratail.com/questions/227944
CSSを用いて画像欄とメッセージ欄を作成し
メッセージ欄をクリックすることで読み進められる
プログラムを作ろうとしております。
上記URLの質問により、メッセージ欄クリックによる
表示メッセージの切り替えには成功いたしました。
その応用で、画像も配列によって切り替えようとしたのですが
うまくいきません。
画像を表示させた後、メッセージ欄をクリックして
文章と共に画像を切り替えようと考えているのですが
画像自体が表示できない状況です。
現状は画像欄に「undefined」と表示され
chromeのデバッグコンソール上にはエラーは表示されておりません。
発生している問題・エラーメッセージ
画像欄に「undefined」表示（未定義）
エラーメッセージはなし
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <title>sample</title> 6 <!--絵の表示枠サイズ指定とシナリオ表示枠サイズ指定、表示フォント情報です--> 7 <link rel="stylesheet" href="canvas.css"> 8</head> 9<body> 10 <!--ビジュアル表示枠を配置します--> 11 <div id="imagebox"></div> 12 <!--メッセージ表示枠を配置します--> 13 <div id="messagebox"></div> 14 <!--最初に戻る用のボタンです--> 15 <button id="init">最初に戻る</button> 16 <!--シナリオ表示用スクリプトです、本質問では省略します--> 17 <script src="scenario.js" charset="UTF-8"></script> 18 <!--絵の表示用スクリプトです--> 19 <script src="picture.js" charset="UTF-8"></script> 20</body> 21</html>
js
1/*picture.js*/ 2var picList =[ 3 "pic1.jpg", 4 "pic2.jpg", 5 "pic3.jpg", 6 "pic4.jpg", 7]; 8 9var img = new Array(); 10for (var i = 0; i < picList.length; i++){ 11 var image = new Image(); 12 image.src = picList[i]; 13 img.push(image); 14} 15 16window.addEventListener('load',function(){ 17 target = document.getElementById("imagebox"); 18 target.innerHTML = picList[i]; 19 })
css
1/*canvas.css*/ 2#imagebox{ 3 width:480px; 4 height:270px; 5 border-style:solid; 6 border-color:#696969; 7 border-width:2px; 8 background-color:#A9A9A9; 9 /*非選択処理です*/ 10 user-select: none; 11 } 12 13#messagebox{ 14 /*文字間隔です*/ 15 letter-spacing:1px; 16 /*行の高さです*/ 17 line-height:27px; 18 width:480px; 19 height:135px; 20 border-style:solid; 21 border-color:#696969; 22 border-width:2px; 23 /*フォントの太さです*/ 24 font-weight:bold; 25 font-size:27px; 26 color:#ffffff; 27 background-color:#A9A9A9; 28 /*非選択処理です*/ 29 user-select: none; 30 }
試したこと
一枚の画像の表示には以下のjsで成功いたしました。
js
1/*imagebox 内に pic.1jpg を表示*/ 2window.addEventListener('load',function(){ 3 target = document.getElementById("imagebox"); 4 target.innerHTML = "<img src = 'pic1.jpg'>"; 5 })
補足情報（FW/ツールのバージョンなど）
使用ブラウザ:chrome
使用エディター:visual Studio Code
ご質問ありがとうございます。
個人的にはファイル名をpic + 数字 ＋ .jpgとして
この数字の部分をiに置き換えたつもりだったのですが
その定義が出来ていない、あるいは抜けているような状況でしょうか。
まずは、いただきましたご質問にお答えする形で調整してみようと思います。
ありがとうございます。
取り急ぎpicture.js 内12行目に
img = "<img src='pic" + i + ".jpg'>";
を追加いたしましたが、状況は変わりませんでした。
エラー等も出ておりません。
回答2件
0
###回答
クリック関連のコードが見当たらなかったので、画像表示に関する事だけ、ご回答させて頂きます。
jsコード内のinnerHtmlの所の記述が間違っていると思います。
以下のコードの（１）（２）の箇所は変更すべきだと思います。
js
1 window.addEventListener('load',function(){ 2 3 /*picture.js*/ 4 var picList = [ 5 "pic1.jpg", 6 "pic2.jpg", 7 "pic3.jpg", 8 "pic4.jpg", 9 ]; 10 console.log("配列："+picList) 11 var img = new Array(); 12 for (var i = 0; i < picList.length; i++){ 13 var image = new Image(); 14 image.src = picList[i]; 15 img.push(image); 16 } 17 target = document.getElementById("imagebox"); 18 //target.innerHTML = picList[i]; //（１） 19 target.appendChild(img[0]); //（２） 20 })
（１）１枚の画像で表示に成功されているコードで理解されていると思いますが、innerHTML にはファイル名を含めたimgタグをセットしないと、画像表示されません。picListはファイル名が格納されている配列なので、ここでは不適切です。また、ここはロード時の処理なので、iを使用している意図がわからなかったです。
（２）picListの代わりにfor文で作成したimg配列を使うべきだと思います。
また、img配列の各要素はHtmlImageElementなので、appendChildで画像表示欄に追加する必要があります。
今回はロード時の処理なので、img[0]を表示する例ということで．．．
クリックするごとに画像を変えるのであれば、クリックイベント内でappendChild(img[])をすればいと思います。ただし、表示切替の時は、切り替え前の画像をタグから削除した方がいいと思います。
こんな感じで
target.innerHTML=""; //子要素を空にする target.appendChild(img[0]); //表示したい画像
以上
投稿2019/12/17 11:19
総合スコア640
問題点をご指摘頂きまして、ありがとうございます。
お恥ずかしながらいただきましたご回答をすぐに理解して
実践するまでには至りませんが
ご教授いただいた内容を元に、調整していきたいと思います。
（調整後、動作いたしましたらこの質問の解決方法欄にjsコードを記載いたします）
よろしくお願いいたします。
0
画像欄に「undefined」表示（未定義）
window の load イベントリスナの中で i の値を調べてみてください。
ご質問のコードでは 画像ファイル名を格納した picList[4]（indexは 0-3） を参照していますので、innerHTML に代入すると暗黙の文字列化で undefined が表示されるのは当然の結果となります。
var img = new Array(); for (var i = 0; i < picList.length; i++){ var image = new Image(); image.src = picList[i]; img.push(image); } window.addEventListener('load',function(){ target = document.getElementById("imagebox"); console.log( i ); // 4 for の箇所で宣言し、４回インクリメントされた target.innerHTML = picList[i]; })
変数を使うときは、
- どこで宣言されたものを使っているか
- その後の変化
に注意しましょう。
追記）
コメント欄より。
クリックするたびに画像のファイル名を取り出す例です。
javascript
1 2// Array.map() で画像要素の一覧を作る。 3var imgList = picList.map(function(filename){ 4 var img = new Image(); 5 img.src = filename; 6 return img; 7}); 8console.log( imgList ); 9 10 11var picIndex=0; // clickカウンタ 兼 画像ファイルインデックス 12document.getElementById("messagebox").onclick = function(){ 13 //document.getElementById("messagebox").innerHTML = txt++; 14 //if( /*画像切り替えの条件*/ ){ 15 picIndex++; 16 if( picIndex % picList.length === 0 ) { 17 picIndex = 0; 18 } 19 console.log( picList[picIndex] ); 20 //} 21}
投稿2019/12/17 10:09
編集2019/12/19 10:16
総合スコア5434
ご回答頂き、ありがとうございます。
ご教授いただきました通り17行目に
console.log( i );
こちらを追加しますとコンソール上に「4」と
表示されました。
しかしその場合でも用意した pic4.jpg が表示されないため
根本的に間違っているようです。
（現在は上記の img.push(image); を消去し
img = "<img src='pic" + i + ".jpg'>"; を入れております）
もう一度一枚表示のコードから検討したいと思います。
よろしくお願いいたします。
> 一度一枚表示のコードから検討したいと思います.
ループは取っ払って、clickCounter のような変数を 0~3 でループさせる仕組みにするといいかもしれませんね。
ありがとうございます。
ループ処理にもバリエーションがあるのですね。
出来ている箇所を崩さず、追記するような形で
考えていきます。
イベントリスナでカウンタを加算・リセットする処理ですね。
サンプルを追記しましたので、参考にしてください。
こちらのCSSに合わせて作成頂き、ありがとうございます！
早速実践させていただきましたが
コンソール上での表示によって動作が分かりやすいです。
絶対に完成させたいと思いますので、よろしくお願いいたします。
AkitoshiManabe様
大変申し訳ございません。
質問上の元の picture.js につきまして以下のように調整してみましたが
imagebox 内に画像 "pic3.jpg" だけが表示され、切り替わらない状況です。
（エラーメッセージ等は出ておりません）
昨日ご回答いただきました
>ご質問のコードでは 画像ファイル名を格納した picList[4]（indexは 0-3） を参照していますので、>innerHTML に代入すると暗黙の文字列化で undefined が表示されるのは当然の結果となります。
こちらの意味を掴めていないことがその原因かと考えておりますので
この部分をもう少し詳細にご教授願えませんでしょうか。
/*picture.js*/
var picList =[
"pic0.jpg",
"pic1.jpg",
"pic2.jpg",
"pic3.jpg",
];
for(var i=0; i<picList.length; i++){
target = document.getElementById("imagebox");
target.innerHTML = ('<img src="' + picList[i] + '">');
}
/*以下上にご教授いただきましたコードが続きます*/
何卒よろしくお願いいたします。
KazuSaka さんの回答内容も取り入れ、imgList （ファイル名ではなく要素の一覧）を 作成しましょう。
ご返答いただきありがとうございます。
innerHTML 内の指定を img src = imgList の表記に修正すればいけそうな気がしました。
挑戦してみます。
上記、全然違いました。
失礼しました。
あなたの回答
tips
プレビュー
