3秒遅らせて画像を切り替えすることが出来ず悩んでおります。

3秒遅らせて画像を切り替えすることが出来ず悩んでおります。
先日の質問で、「にこちゃんマークの画像」を「グー」の画像へ変更することが出来ました。

今度はこの３つある画像の切り替えを３秒経つごとに一つずつ行いたく。setTimeout関数を使用したのですが、うまく行きません。
どう修正するればよろしいでしょうか？
ご回答の程よろしく御願い致します。

☆表示されるエラーメッセージ
Uncaught ReferenceError: change2 is not defined(anonymous function) @ VM246:1
VM247:1 Uncaught ReferenceError: change3 is not defined.

lang
1コード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="janken_style.css"> <title>じゃんけん</title> <script type="text/javascript"> window.onload=function(){ //ここにJSを記述

function random(max){
//乱数
var num=0;
num = Math.floor(Math.random() * max + 1);
return num;
}

//ここが不具合が発生する箇所です。どうぞ、よろしく御願い致します。
function change1(){
document.gazo1.src ="M-j_gu02.png";
}
function change2(){
document.gazo2.src ="M-j_gu02.png";
}
function change3(){
document.gazo3.src ="M-j_gu02.png";
}

}

//☆グーボタン☆
var btn = document.getElementById("gu_btn");
btn.onclick = function(){
var num = random(3)
Computer_gu(num);
result_gu(num);
changeIMG(num);
}

//コンピューター関数
function Computer_gu(num){
if(num == 1){
document.getElementById("pc").innerHTML = "コンピューター：グー";
}
if(num == 2){
document.getElementById("pc").innerHTML = "コンピューター：チョキ";
}
if(num == 3){
document.getElementById("pc").innerHTML = "コンピューター：パー";
}
}

//結果関数
function result_gu(num){
if(num == 1){
document.getElementById("num").innerHTML = "あいこ";
}
if(num == 2){
document.getElementById("num").innerHTML = "あなたの勝ち";
}
if(num == 3){
document.getElementById("num").innerHTML = "あなたの負け";
}
}

//☆チョキボタン☆
var btn = document.getElementById("cho_btn");
btn.onclick = function(){
var num = random(3)
Computer_cho(num);
result_cho(num);
}

//☆パーボタン☆
var btn = document.getElementById("par_btn");
btn.onclick = function(){
var num = random(3)
Computer_pa(num);
result_pa(num);
}

};
</script>

</head> <body> <header> <h1>じゃんけん</h1> </header> <script> //画像切り替え //画像を配列に格納 //var img = new Array(); //img[0] = new Image(); //img[0].src = "niconico.jpeg"; //img[1] = new Image(); //img[1].src = "M-j_gu02.png"; //img[2] = new Image(); //img[2].src= "M-j_ch02.png"; //img[3] = new Image(); //img[3].src= "M-j_pa02.png"; </script> <main> <ul> <CENTER> <div id="contents"> <img src="islots2.jpg" class="slots"> <img src="niconico.jpeg" width="80" height="97" class="niconico_1" img name = "gazo1"> <img src="niconico.jpeg" width="80" height="97" class="niconico_2" img name ="gazo2"> <img src="niconico.jpeg" width="80" height="97" class="niconico_3" img name ="gazo3"> </div>

</ul>
    <center>
    </br>
    </br>
    </br>
    </br>
    </br>
    <div>あなた</div>
    <li id="gu_btn">グー</li>
	<li id="cho_btn">チョキ</li>
	<li id="par_btn">パー</li>
    </center>

<div id="pc">コンピュータの出した手は？</div>
<div id="num">ここに表示されます</div>
</CENTER>

</main> <footer></footer> </body> </html>

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

回答1件

ベストアンサー

lang
1function change1() {
2    document.gazo1.src = "M-j_gu02.png";
3    setTimeout(change2, 3000);
4}
5
6function change2() {
7    document.gazo2.src = "M-j_gu02.png";
8    setTimeout(change3, 3000);
9}
10
11function change3() {
12    document.gazo3.src = "M-j_gu02.png";
13}
14
15function changeIMG(num) {
16    if (num == 1) {
17        change1();
18    }
19    if (num == 2) {
20        document.gazo1.src = "M-j_ch02.png";
21        document.gazo2.src = "M-j_ch02.png";
22        document.gazo3.src = "M-j_ch02.png";
23    }
24    if (num == 3) {
25        document.gazo1.src = "M-j_pa02.png";
26        document.gazo2.src = "M-j_pa02.png";
27        document.gazo3.src = "M-j_pa02.png";
28    }
29}

これでどうでしょうか？

投稿2015/05/06 17:20

htsign

総合スコア870

Tomoaki_Fukuda

2015/05/07 17:21

ありがとうございました！！この問題も無事解決でき、ついに目標としていたプログラムが完成しました。大変助かりました。

htsign

2015/05/07 17:32

おめでとうございます！では次はリファクタリングですね！表面上の挙動を変えずに、コードの見通しを良くしてみましょう。より一層理解が深まると思います。例えば、 function Computer_gu(num){ 　if(num == 1){ 　　document.getElementById("pc").innerHTML = "コンピューター：グー"; 　} 　if(num == 2){ 　　document.getElementById("pc").innerHTML = "コンピューター：チョキ"; 　} 　if(num == 3){ 　　document.getElementById("pc").innerHTML = "コンピューター：パー"; 　} } これはこうも書けます。 function Computer_gu(num) { 　var setPc = function(hand) { 　　document.getElementById("pc").innerHTML = "コンピューター：" + hand; 　}; 　　switch (num) { 　　case 1: setPc("グー"); break; 　　case 2: setPc("チョキ"); break; 　　case 3: setPc("パー"); break; 　} } あくまで一例ですが、仮に次に機能追加や修正を行うとして、その際の修正範囲を狭めるためにも同じようなコードはまとめておくと便利です。無理にまとめすぎると逆に見通しが悪くなることもありますが、基本的にはまとまっていた方が何かと有利だと思いますよ。

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