Jquery部分作動せず信号制作

信号制作でクリック、青三秒点灯、青三秒点滅、からの黄色二秒点灯、最後に赤五秒点灯させたいのですがJＱｕｅｒｙで書いた部分、青点滅終了と黄色点灯開始が反応しません。なぜでしょうか？？


<DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>信号を作る</title>
		<link rel="stylesheet" href="信号.css">
	</head>	
<body>
	<div id="square">
			<div id="red"></div>
			<div id="yellow"></div>
			<div id="blue"></div>
	</div>	
	<button id="start">START</button>
	<button id="stop">STOP</button>

<script
  src="https://code.jquery.com/jquery-3.1.1.slim.js"
  integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA="
  crossorigin="anonymous"></script>
<script>
	var interval; //setintervalとclearintervalつなぐやつ

	//青３秒点灯→３秒点滅→黄色２秒→赤５秒

	//とりあえずボタン押したら青が点灯するプログラム書きます
	window.onload=function(){
		var start=document.getElementById('start');
		start.addEventListener('click',tentou,false);
		start.addEventListener('click',start_flash,false);
	}
	
	function tentou(){
		var blue=document.getElementById('blue');
		blue.style.backgroundColor='blue';
	}

	//ボタン押してして三秒後に点滅開始
	function start_flash(){
		setTimeout(wait,3000);
		function wait(){
			interval=setInterval(tenmetsu,500);
		}	
	}
	function tenmetsu(){
		var blue=document.getElementById('blue');
		if(blue.style.backgroundColor==='blue'){
			blue.style.backgroundColor='white'
		}
		else{
			blue.style.backgroundColor="blue"
		}
	}
	//その三秒後（デフォルトから６秒後)点滅終了
	$('#blue').click(function(){
		setTimeout(wait,6000);
		function wait(){
			clearInterval(interval);
		}
	});
	//同時に黄色点灯
	$('#yellow').click(function(){
		setTimeout(yellow,6000);
		function yellow(){
			$('#yellow').css('background-color','yellow');
			}    
    });

    
     
</script>
</body>
</html>
コード

kei344

2016/11/05 13:14

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

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

回答3件

ベストアンサー

13秒でintervalを回せばよいのでは

HTML
1<script>
2$(function(){
3  var flg=false;
4  var timerId1;
5  var timerId2;
6  var c=0;
7  $('#hoge').on('click',function(){
8    if(flg){
9      clearInterval(timerId1);
10      clearInterval(timerId2);
11      flg=false;
12      return false;
13    }
14    flg=true;
15    timerId1=setInterval(function(){
16      c%=13;
17      switch(c){
18      case 0:
19        $('#hoge').text('青');
20        break;
21      case 3:
22      case 4:
23      case 5:
24        clearInterval(timerId2);
25        timerId2=setInterval(function(){
26          $('#hoge').fadeOut(100,function(){$(this).fadeIn(100)});
27        },200);
28        break;
29      case 6:
30        clearInterval(timerId2);
31        $('#hoge').text('黄');
32        break;
33      case 8:
34        $('#hoge').text('赤');
35        break;
36      }
37      c++;
38      $('#time').text(c);
39      console.log(timerId1);
40    },1000);
41  });
42});
43</script>
44
45<div id="hoge">click here</div>
46<div id="time">-</div>
47

投稿2016/11/07 03:08

yambejp

総合スコア114814

動くサンプル：https://jsfiddle.net/kyv6xe15/

挙動はそもそも変ですが、動きますよ。

その三秒後（デフォルトから６秒後)点滅終了

setTimeoutは実行したときからの秒数なので、「その三秒後」にはなりません。

追記：

動くサンプル：https://jsfiddle.net/kyv6xe15/1/

イベント処理をjQueryで行うかaddEventListenerで行うか統一したほうが良いですよ。

投稿2016/11/05 13:31

編集2016/11/05 14:48

kei344

総合スコア69407

kei344

2016/11/05 14:45

$('#yellow').click(function(){});をクリックすることなく実行しようとしているのか。

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

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>信号を作る</title>
6	</head>
7	<body>
8		<div id="square">
9			<div id="red"></div>
10			<div id="yellow"></div>
11			<div id="blue"></div>
12		</div>
13		<button id="start">START</button>
14		<button id="stop">STOP</button>
15
16		<script
17			src="https://code.jquery.com/jquery-3.1.1.slim.js"
18			integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA="
19		crossorigin="anonymous"></script>
20		<script>
21			var interval; //setintervalとclearintervalつなぐやつ
22
23			//青３秒点灯→３秒点滅→黄色２秒→赤５秒
24
25			//とりあえずボタン押したら青が点灯するプログラム書きます
26			window.onload = function () {
27				var start = document.getElementById('start');
28				start.addEventListener('click', tentou, false);
29				start.addEventListener('click', start_flash, false);
30			};
31
32			function tentou() {
33				var blue = document.getElementById('blue');
34				blue.style.backgroundColor = 'blue';
35			}
36
37			//ボタン押してして三秒後に点滅開始
38			function start_flash() {
39				setTimeout(wait, 3000);
40				function wait() {
41					interval = setInterval(tenmetsu, 500);
42				}
43			}
44			function tenmetsu() {
45				var blue = document.getElementById('blue');
46				if (blue.style.backgroundColor === 'blue') {
47					blue.style.backgroundColor = 'white'
48				} else {
49					blue.style.backgroundColor = "blue"
50				}
51			}
52			//その三秒後（デフォルトから６秒後)点滅終了
53			$('#blue').click(function () {
54				setTimeout(wait, 6000);
55				function wait() {
56					clearInterval(interval);
57				}
58			});
59			//同時に黄色点灯
60			$('#yellow').click(function () {
61				setTimeout(yellow, 6000);
62				function yellow() {
63					$('#yellow').css('background-color', 'yellow');
64				}
65			});
66		</script>
67	</body>
68</html>