配列で画像を表示し、クリック操作で切り替えたい

前提・実現したいこと

以前こちらでご質問させていただいたことに
関連する質問となり恐縮です。
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

azuapricot

2019/12/17 09:15

picList[i]; iに数字はいってます？

ktanaka11

2019/12/17 10:08 編集

ご質問ありがとうございます。個人的にはファイル名をpic + 数字＋ .jpgとしてこの数字の部分をiに置き換えたつもりだったのですがその定義が出来ていない、あるいは抜けているような状況でしょうか。まずは、いただきましたご質問にお答えする形で調整してみようと思います。ありがとうございます。取り急ぎpicture.js 内12行目に img = "<img src='pic" + i + ".jpg'>"; を追加いたしましたが、状況は変わりませんでした。エラー等も出ておりません。

行動規範の内容に同意します

回答2件

###回答
クリック関連のコードが見当たらなかったので、画像表示に関する事だけ、ご回答させて頂きます。

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

KazuSaka

総合スコア640

ktanaka11

2019/12/18 09:03

問題点をご指摘頂きまして、ありがとうございます。お恥ずかしながらいただきましたご回答をすぐに理解して実践するまでには至りませんがご教授いただいた内容を元に、調整していきたいと思います。（調整後、動作いたしましたらこの質問の解決方法欄にjsコードを記載いたします）よろしくお願いいたします。

行動規範の内容に同意します

画像欄に「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

AkitoshiManabe

総合スコア5434

ktanaka11

2019/12/18 09:00

ご回答頂き、ありがとうございます。ご教授いただきました通り17行目に console.log( i ); こちらを追加しますとコンソール上に「4」と表示されました。しかしその場合でも用意した　pic4.jpg　が表示されないため根本的に間違っているようです。（現在は上記の　img.push(image);　を消去し　img = "<img src='pic" + i + ".jpg'>";　を入れております）もう一度一枚表示のコードから検討したいと思います。よろしくお願いいたします。

AkitoshiManabe

2019/12/18 09:14

> 一度一枚表示のコードから検討したいと思います. ループは取っ払って、clickCounter のような変数を 0~3 でループさせる仕組みにするといいかもしれませんね。

ktanaka11

2019/12/18 09:24

ありがとうございます。ループ処理にもバリエーションがあるのですね。出来ている箇所を崩さず、追記するような形で考えていきます。

AkitoshiManabe

2019/12/18 09:46

イベントリスナでカウンタを加算・リセットする処理ですね。サンプルを追記しましたので、参考にしてください。

ktanaka11

2019/12/18 10:05

こちらのCSSに合わせて作成頂き、ありがとうございます！早速実践させていただきましたがコンソール上での表示によって動作が分かりやすいです。絶対に完成させたいと思いますので、よろしくお願いいたします。

ktanaka11

2019/12/19 09:58

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] + '">'); } /*以下上にご教授いただきましたコードが続きます*/ 何卒よろしくお願いいたします。

AkitoshiManabe

2019/12/19 10:12

KazuSaka さんの回答内容も取り入れ、imgList （ファイル名ではなく要素の一覧）を作成しましょう。

ktanaka11

2019/12/20 10:19 編集

ご返答いただきありがとうございます。 innerHTML 内の指定を img src = imgList の表記に修正すればいけそうな気がしました。挑戦してみます。上記、全然違いました。失礼しました。

行動規範の内容に同意します

あなたの回答