クリックごとに音を鳴らす、および画像の表示をさせたい。

前提・実現したいこと

クリックごとに音の再生、ボタンの下に画像表示をさせたいです。

HTML、CSS、javaScriptにてページを作成しました。
しかし、記述が不完全なため画像表示までに至っていません。

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

音は再生されるが画像は表示されない

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mainpage.css"> <meta charset="UTF-8"> <title>aaa</title> <script src="javatest1.js" defer></script> </head> <div id="kuriku">

</div> <body> <div id="target"></div> </body> </html>

javascript
document.getElementById("kuriku").addEventListener("click",function() {
var my_audio = new Audio("音声ファイルのURL");
//ボタンにクリックイベントを設定
my_audio.currentTime = 0; //再生開始位置を先頭に戻す
my_audio.play(); //サウンドを再生

 });

 var target = document.getElementById( 'target' );
 var bt = document.getElementById( 'bt' );
 bt.addEventListener( 'click', function( e ) {
     var imglist = [
      画像のURL
     ]
     var selectnum = Math.floor(Math.random() * imglist.length);
var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
target.innerHTML = element;
 }, false );

CSS
.btn-square {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #ad0404;/ボタン色/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.btn-square:active {
/ボタンを押したとき/
-webkit-transform: translateY(4px);
transform: translateY(4px);/下に動く/
border-bottom: none;/線を消す/
}

試したこと

"target"の位置を変えてみたりしましたが、見当違いの気もしています。

int32_t

2021/07/13 06:45

ブラウザの開発者ツールのコンソールに何かエラーが出ていませんか?

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

回答2件

ベストアンサー

CSSが公開されてないので、完全なテストをできませんでしたが、現状で、当方では動作確認できました。

次回からはソースの完全なセットを提示するようにしてください。（CSSも忘れずに！）

kurikuのイベントハンドラ内で、音声再生と合わせて画像の差し込みをすればOKです。
いらないイベントハンドラは削除しました。

あとスクリプトのソースはHTMLに直書きしてありますので
別ファイルにするなら、今、<script>タグがある位置で読み込んでください。
headで読み込んでも、その時点ではDOMが完全に読み込まれていないため動作しません。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" type="text/css" href="mainpage.css">
6    <title>aaa</title>
7</head>
8
9
10<body>
11    <div id="kuriku">
12        <a href="#" class="btn-square">TEST</a>
13    </div>
14
15    <div id="target">
16
17    </div>
18
19　　<!-- <script src="javatest1.js"></script> --><!-- 別ファイルにした場合はここで読み込む-->
20    <script>
21        //画像の配列はscriptタグの直下の階層にvarで記載することでグローバル変数となりどこからでも
22        //参照できるようになります。後で別の処理やイベントハンドラ内からも参照できるので便利です
23        var imglist = [
24        //画像のURL
25        '001.jpeg', /*　　No.01　　*/
26        '002.jpeg', /*　　No.02　　*/
27        '003.jpeg', /*　　No.03　　*/
28        ]
29
30        //イベントリスナー内でnewしてるといくつものAudioオブジェクトが作られて
31        //その内、メモリ不足でクラッシュする。
32        //グローバル変数として１つだけ、作っておくようにする。
33        //でないとAudioオブジェクトが複数作られ、クリックの分多重で再生されてしまう
34        var my_audio = new Audio("音声ファイルのURL");
35
36        document.getElementById("kuriku").addEventListener("click",function() {
37            //ボタンにクリックイベントを設定
38            my_audio.currentTime = 0;  //再生開始位置を先頭に戻す
39            my_audio.loop = false; //ループ再生をOFFにする
40            my_audio.load();  //先にloadしておかないと動かないブラウザーがある
41            my_audio.play();  //サウンドを再生
42
43            //ランダムな番号を生成する
44            var selectnum = Math.floor(Math.random() * imglist.length);
45
46            //targetのinnerHTMLに画像のソースを入れ込む
47            var target = document.getElementById( 'target' );
48            var element = '<img src="' + imglist[ selectnum ] + '" alt="" />';
49            target.innerHTML = element;
50        });
51    </script>
52
53</body>
54
55</html>

コードブロックの右上のアイコンをクリックするとコード全体をコピーできるので、ご自分の環境に張り付けて、動作確認してみてください。

投稿2021/07/13 07:15

編集2021/07/13 11:32

nekora

総合スコア501

nekora

2021/07/13 07:16

回答が役になったなら回答の横の数字をポイントすると回答の評価の増減ができます。また解決につながった回答はベストアンサーに指定できます。この設定は個別に指定できます。

riiisa

2021/07/13 14:28

丁寧にご教示頂きありがとうございました。大変勉強になりました。 scriptを別ファイル化すると何故かうまく反応しませんでしたが、（すべてコピペしていますが”　｝”がないとエラーを吐く）別ファイルにしてたのは私的なこだわりだったので、想定していたものはできたのでよかったです。今回はありがとうございました。

riiisa

2021/07/13 16:26

すみません。その後別ファイルでもできました。記述が間違えていました。ありがとうございました。

nekora

2021/07/13 18:16

あと、ちょっと１つ気になったんですが、scriptのsrcのファイル名が、javatest1.jsになっていますが javaではなくて、JavaScriptです。 javaとJavaScriptは名前こそ似てますが全くの別物です。 javaの開発会社が新規にスクリプト言語を開発した際にjavaが人気があって売れているので、それにあやかって、JavaScriptと命名しただけで全くの別物であると理解してくださいね。２つを混同しないように気お付けてください。

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