buttonをクリックしても画像が変わりません

javascript
1<html>
2<head>
3<title></title>
4</head>
5<body>
6
7   <input type=button value="画像を表示" onclick="onButtonClick()">
8   <div id="dsp"></div>
9 <script>
10   let imglist =["A.jpg","B.png","C.png","D.png"];
11   let selectnum = Math.floor(Math.random() * imglist.length);
12   let output = "<img src=" + imglist[selectnum] + ">";        //画像出力は<img src="sample.jpg">のような書き方
13   let dsp =document.getElementById("dsp");
14  
15 function onButtonClick(){
16     dsp.innerHTML = output;
17    }
18</script>
19</body>
20</html>

「画像を表示」ボタンをクリックしたら、画像が変わるようにしたいのですが上記の記述では変化しません。
どこに問題がるのかご教授ください。よろしくお願いします。

m.ts10806

2020/04/26 07:38 編集

何が起きているか具体的に記載してください。 →回答に移行

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

回答3件

ベストアンサー

とりあえず提示のコードでは「最初に出た画像が出続ける」ようなコードになっています。
「押すたびに変えたい」ならselectnumを取得するタイミングを押したときにしなければなりません。

それでも画像が出ないなら画像のパスが間違ってるか、画像がないかだと思います。
現在のコードでもアクセス時に決まった画像名があれば出ますから。

投稿2020/04/26 07:38

編集2020/04/26 07:45

m.ts10806

総合スコア80875

beginner001

2020/04/26 22:41

ありがとうございます。同一フォルダ内にありますので画像のパスは間違っていません。 selectnumを取得するタイミングの記述が全く分かりません。どのようにしたらよいのでしょうか。

m.ts10806

2020/04/26 23:30

書いてます。 >押したときにしなければなりません。押す＝イベントが発生する　ですから。イベントはあくまで発生したときにだけ動きます。それ以外は画面読み込んだときに処理が終わっていて、特に動きません。なので、「最初に決まった状態から変わらない」状態になってます。なので、「イベントが発生したタイミング毎回実行する」ようにすれば、毎回実行されるので、意図した動きになります。

beginner001

2020/04/27 05:48

力不足です。お恥ずかしい限りですがギブアップです。

m.ts10806

2020/04/27 06:15

単にonButtonClick()の中に書けばよいです。 function onButtonClick(){ selectnum = Math.floor(Math.random() * imglist.length); output = "<img src=" + imglist[selectnum] + ">"; dsp.innerHTML = output; } 考え方は「固定となるものは外に、可変となるものは中に」

beginner001

2020/04/27 22:24

「固定となるものは外に、可変となるものは中に」の文言が刺さりました。ありがとうございました。

m.ts10806

2020/04/27 23:25

色んな場所に書いてみればいいですよ。 JavaScriptからエラーが出るだけでPCとかには何も影響ないですから。

m.ts10806

2020/04/27 23:26

人にコード書いてもらうより自分でやったほうが身に付きますからね。他人のコードもらうと「できた気になる」だけです。

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

JavaScript側で、以下のように修正が必要そうです。

JS
1let imglist =["A.jpg","B.png","C.png","D.png"];
2let selectnum = Math.floor(Math.random() * imglist.length);
3
4/*
5let output = "<img src=" + imglist[selectnum] + ">";        //画像出力は<img src="sample.jpg">のような書き方
6*/
7
8let dsp =document.getElementById("dsp");
9
10function onButtonClick(){
11  /* クリックするたびに実行が必要なので移動 */
12  let output = "<img src=" + imglist[selectnum] + ">";        //画像出力は<img src="sample.jpg">のような書き方
13  dsp.innerHTML = output;
14}

「A.jpg」という画像が、HTMLファイルと同じ階層にない、ということもありそうです。

フォルダ内で、以下のように並んでいますか?
A.jpg
B.png
C.png
D.png
index.html

もし「img」フォルダの中にあるのであれば、以下のように書き換えてください。

JS
1let imglist =["img/A.jpg","img/B.png","img/C.png","img/D.png"];

あと、Aだけjpgで、あとはpngなのは、合っていますか?
pngしかないのに「A.jpg」を表示しようとしているのかもしれません。

関係ないかも知れませんが、おそらく「"」がHTML側に出力されていません。
以下のように変更してみてください。

変更前: let output = "<img src=" + imglist[selectnum] + ">";
変更後: let output = '<img src="' + imglist[selectnum] + '">';

投稿2020/04/26 07:42

編集2020/04/26 07:46

new1ro

総合スコア4528

m.ts10806

2020/04/26 07:44

>おそらく「"」がHTML側に出力されていません。属性値にクォートは必須ではないので、仰るように関係ないとは思います（あったほうが良いのは確かですけどね）

new1ro

2020/04/26 07:52

基本「"」を省略した書き方を見かけないので、気になってしまいましたw ありがとうございます！

m.ts10806

2020/04/26 07:57 編集

>基本「"」を省略した書き方を見かけないので業務やってると見ないですね。teratailの質問ではたまに見ます。クォートがないことでコードが正しく動いてない例を見ますね。例： <img src=test.jpgwidth=100>

beginner001

2020/04/26 22:34

ありがとうございます。フォルダ内に画像があります。imgフォルダは作っていません。ご指摘の記述を実行するとB.pngが表示されて、そのあとはクリックしても反応はありません。

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

どこに問題がるのか

イベントについて理解していないことに問題があります。

html
1<script>
2// 1. script 要素が読み込まれた直後に宣言・実行される処理
3
4let imglist =["A.jpg","B.png","C.png","D.png"];
5
6// 配列添字は何度もランダムで決定できるように関数化
7let selectnum = () => Math.floor(Math.random() * imglist.length);
8
9let dsp =document.getElementById("dsp");
10// 初期の画像
11dsp.innerHTML = `<img src="${imglist[selectnum()]}">`;
12
13function onButtonClick(){
14  // 2. ボタンのクリックイベントで実行される処理
15
16  // クリック後の画像
17  dsp.innerHTML = `<img src="${imglist[selectnum()]}">`;
18}
19</script>