JavaScriptで画像をランダム表示

JavaScriptで画像をランダム表示したい

JavaScript初心者です。
ボタンを押すと用意した画像をランダムに表示できるようにしたいのですが、
以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Failed to load resource: net::ERR_FILE_NOT_FOUND

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5	<link rel="stylesheet"  href="style.css">
6</head>
7	<body>
8 <div id="container">
9		<h1>Today's Anne Hathaway</h1>
10
11		<div id="disp">
12
13			<img src="anne-1.png">
14			
15		</div>
16
17		<button id="btn">touch me!</button>
18	</div>
19
20
21		<script type="text/javascript">
22			var disp = document.getElementById("disp");
23			var btn = document.getElementById("btn");
24			
25			var img = ["anne-1.png","anne-2.png","anne-3.png","anne-4.png"];
26			var num = 0;
27			
28
29			btn.addEventListener('click', function(){
30
31			var num = Math.floor(Math.random()*img.length);
32			disp.innerHTML = "<img src=”img[num]”>";
33
34			})
35			
36		</script>
37
38	</body>
39</html>

試したこと

エラーコードをググって、
１：Chromeのキャッシュを削除
２：ファイルをコピーして、元のファイルを削除
３：Chromeを起動
４：コピーしたファイルを元の場所に戻して再度Chromeで確認

ということを試しましたが解決しませんでした。

###補足
画像はファイルと同じフォルダ内にあります。
ボタンを押すと画像マークは出るのですが、
画像そのものは表示されません。

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

回答2件

javascript
1disp.innerHTML = "<img src=”img[num]”>";

これの上の行か下の行に、

javascript
1console.log("<img src=”img[num]”>");

を追加してみて、出力内容を見てみてください。
あなたが disp.innerHTML に設定したい値と出力内容は一致していますか？

投稿2019/11/11 12:07

2KOH

総合スコア999

emukokoro

2019/11/11 12:19

ありがとうございます！ファイル名になってしまってたのですね???? ぜんぜん気が付きませんでした。

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

ベストアンサー

”img[num]”というファイル名の画像を表示しようとしています。

js
1// disp.innerHTML = "<img src=”img[num]”>";
2//                            ↓ 半角           ↓ 半角
3   disp.innerHTML = '<img src="' + img[num] + '">';
4//                                  ↑ 変数をテキストとして連結