前提・実現したいこと

JavaScript初心者です
JavaScriptでガラポンを作成しています
表示の仕方として
1.画像（PNG）ファイルの設定
↓↓
2.ボタンをクリック
↓↓
3.動画（gif)ファイル（ガラポンが回っている動画の出力）
↓↓
4.画像（pNG)ファイルの出力（結果表示）画像ランダムで表示
という流れのプログラムを組んでいる時にボタンをクリックしても反応しなくなりました.
最後の画像の出力の方法が分からずイベントを発生させられません
よろしくお願いします。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

設定画面から変化しない
エラーメッセージ


### 該当のソースコード
<!DOCTYPE　html>
	<html	lang="ja">
		<head>
			<title>ガチャ</title>
		</head>
	<body>
		<div	id="picdiv">
		<img	src="gatya01.png">
		</div>
		<input	type="button"value="抽選！"onclick="change moive()">
	<script>
	function change movie(){
	 var pDiv = document.getElementById("picdiv");
	     pDicintterHTML = "<img src='garaponn.gif'>";
	}
	function  changePic(){
	var pDiv = document.getElementById("picdiv");
	 var x =Math.random();
		if(x < 0.1){
			pDiv.innerHTML="<img	src='gatya02.png'>";
		}else if(x < 0.2){
			pDiv.innerHTML="<img	src='gatya03.png'>";
		}else if(x < 0.4){
			pDiv.innerHTML="<img	src='gatya04.png'>";
		}else if(x < 0.6){
			pDiv.innerHTML="<img	src='gatya05.png'>";
		}else if(x < 0.8){
			pDiv.innerHTML="<img	src='gatya06.png'>";
		
		}else{
			pDiv.innerHTML="<img	src='gatya07.png'>";
		}
	    }
	</script>
	</body>
	</html>

m.ts10806

2019/02/04 00:30

コードはマークダウンのcode機能を利用してご提示ください。

m.ts10806

2019/02/04 00:31

>pDiv = intterHTML = 上記、何がしたいのでしょうか

退会済みユーザー

2019/02/04 00:58

コード混ぜてしまい本当にすみませんでした。 pDiv = intterHTML = のところは、gifコード動画ファイルを読み込見たいと思いつけていました

m.ts10806

2019/02/04 01:01

質問は編集できるので適宜ご対応ください。始めの印象では↓を書き間違えたのかなと。 pDiv.innerHTML

退会済みユーザー

2019/02/04 01:10

ありがとうございます編集してきます

m.ts10806

2019/02/04 01:13

pDicintterHTML 　→ pDiv.innerHTML 既にchangePic()で使われているので同じものかと思います。コードについて難しければコード部分を選択状態で<code>ボタンを押してください。「コードブロック」といってインデントなどがそのまま反映されてコピーボタンもでてくるので再現確認が正しく行いやすくなり、回答も得やすくなります。

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

回答2件

ベストアンサー

前提で何点か。

1つ目：

ものすごく空白が多かったり、隣の属性とくっついていたりして、読みづらいです。
例：

html
1<img    src="gatya01.png">
2<input    type="button"value="抽選！"onclick="change moive()">

空白が多い分は半角スペースなので問題は起きませんが、読みづらいのと何かあったときの問題の切り分けがしづらくなります。
半角スペース1つにしましょう。隣の属性とくっついてしまっているものも同様です。

html
1<img src="gatya01.png">
2<input type="button" value="抽選！" onclick="change moive()">

2つ目：

関数宣言および呼び出しにはスペースは使えません。
onclick="change moive()">
function change movie()

半角のアンダーバーでつないだり、change_movie
2つ目以降の単語の冒頭を大文字にしたり、changeMovie　
して「1つの文字列」として表現するようにしましょう。

ブラウザの開発ツールのコンソールを確認してみると
Uncaught SyntaxError: Unexpected identifierのようなエラーが出ていると思います。スペースにより関数名が1つの文字列となっていないため、構文エラーとなっている状態ですね。

3つ目：

私もコメントで指摘したとおり、かなりのスペルミスがあります。
コピペしてもらえれば良かったんですが・・・。

pDiv = intterHTML =
ではなく
pDicintterHTML
でもなく
pDiv.innerHTML

「picdiv内の画像を書き換える」ですよね？
それなら使うべきはpDivを取得した上でのinnerHTMLです。

2つ目も3つ目もchangePic()ではできているのでそこと整合性をとればできたことだと思います。

結果

上記、全て対応すれば最初の「抽選！」ボタンは動くようになりますが、
changePic()を呼び出すところがないので、それも加味すると下記のような感じですね。

html
1<input type="button"value="抽選開始" onclick="changeMovie()">
2<input type="button"value="抽選" onclick="changePic()">

js
1function changeMovie() {
2	var pDiv = document.getElementById("picdiv");
3	pDiv.innerHTML = "<img src='garaponn.gif'>";
4}
5function changePic() {
6	var pDiv = document.getElementById("picdiv");
7	var x = Math.random();
8    var result = "07";
9	if (x < 0.1) {
10		result = "02";
11	} else if (x < 0.2) {
12		result = "03";
13	} else if (x < 0.4) {
14		result = "04";
15	} else if (x < 0.6) {
16		result = "05";
17	} else if (x < 0.8) {
18		result = "06";
19	}
20    pDiv.innerHTML = "<img src='gatya"+result+".png'>";
21}

※ボタン1つでしたいのでしたらonclickの中身を書き換えるかボタンの表示非表示を切り替えるかのどちらかで対応してください。

投稿2019/02/04 01:32

m.ts10806

総合スコア80842

退会済みユーザー

2019/02/04 02:12

的確なご指摘ありがとうございます onclickの中身を書き換えて表示しようと思います

m.ts10806

2019/02/04 02:19

ボタンのキャプションも書き換えた方がいいですね。いずれにしてもエラーとドキュメントは確認してください。

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

pDicintterHTMLがおかしいのでは？

sample

基本的にはアニメーションgifが回っている秒数を待ってから次に移るだけ
以下例だと2秒まって結果を表示します

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(){
3  document.querySelector('#chusen').addEventListener('click',function(e){
4    var pImg= document.querySelector('#picdiv img');
5    pImg.src='garaponn.gif';
6    pImg.alt='chusen...';
7    var x =Math.random();
8    var src="gatya02.png",alt='img2';
9    if(x >= 0.1){ src='gatya03.png',alt='img3'};
10    if(x >= 0.2){ src='gatya04.png',alt='img4'};
11    if(x >= 0.4){ src='gatya05.png',alt='img5'};
12    if(x >= 0.6){ src='gatya06.png',alt='img6'};
13    if(x >= 0.8){ src='gatya07.png',alt='img7'};
14    setTimeout(function(){pImg.src=src,pImg.alt=alt},2000);
15  });
16});
17</script>
18<div id="picdiv">
19<img src="gatya01.png" alt="img1">
20</div>
21<input type="button" value="抽選！" id="chusen">