js clearIntervalが作動しません。

##スロットを作っています

html
1<!DOCTYPE html>
2<html lang ="ja">
3  <head>
4    <meta charset="UTF-8">
5    <title>slot</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8
9
10  <body>
11
12   <div id="container">
13
14     <div id="A">
15       <img src="./img/bell.png" id="X" width="120px" height="150px">
16       <p id="p1">STOP</p>
17     </div>
18
19     <div id="B">
20       <img src="./img/cherry.png" id="X1" width="120px" height="150px">
21       <p id="p2">STOP</p>
22     </div>
23
24     <div id="C">
25       <img src="./img/seven.png" id="X2" width="120px" height="150px">
26       <p id="p3">STOP</p>
27     </div>
28
29     <div id="btn">S t a r t</div>
30
31     
32     
33   </div>
34   
35    <script type="text/javascript" src="script.js"></script>
36  </body>
37

スタートを押すとsetIntervalにより上記id="A","B","C"内の画像がそれぞれ指定時間ごとに切り替わるようにしています。

それぞれの画像の下にあるストップボタンを押すとclearIntervalによって止まるようにしたいのですがうまくいきません。

js
1'use strict'
2var A1 = document.getElementById('A')
3var B1 = document.getElementById('B')
4var C1 = document.getElementById('C')
5var P  = document.getElementById('p1')
6var P1 = document.getElementById('p2')
7var P2 = document.getElementById('p3')
8
9// イメージ切り替え
10var R = function() {
11
12 var M = Math.floor(Math.random() * 10);
13
14        if( M === 1 ){
15    X.src = "./img/bell.png";
16  }else if( M === 2 ){
17    X.src = "./img/cherry.png";
18  }else if( M === 3 ){
19    X.src = "./img/seven.png";
20  }else{
21    R();
22  }
23}
24
25var R1 = function() {
26
27 var M1 = Math.floor(Math.random() * 10);
28
29        if( M1 === 1 ){
30    X1.src = "./img/bell.png";
31  }else if( M1 === 2 ){
32    X1.src = "./img/cherry.png";
33  }else if( M1 === 3 ){
34    X1.src = "./img/seven.png";
35  }else{
36    R1();
37  }
38}
39
40var R2 = function() {
41
42 var M2 = Math.floor(Math.random() * 10);
43
44        if( M2 === 1 ){
45    X2.src = "./img/bell.png";
46  }else if( M2 === 2 ){
47    X2.src = "./img/cherry.png";
48  }else if( M2 === 3 ){
49    X2.src = "./img/seven.png";
50  }else{
51    R2();
52  }
53}
54
55
56// スロット
57var L = function() {
58var S = setInterval(R, 400);
59S;
60}
61
62var L1 = function() {
63var S1 = setInterval(R1, 250);
64S1;
65}
66
67var L2 = function() {
68var S2 = setInterval(R2, 100);
69S2;
70}
71
72// ストップ
73 P.addEventListener('click',()=> {
74  clearInterval(S);
75})
76
77P1.addEventListener('click',()=> {
78  clearInterval(S1);
79})
80
81P2.addEventListener('click',()=> { 
82  clearInterval(S2);
83})
84
85
86// スタートボタン作動
87document.getElementById("btn").addEventListener('click',()=> {
88  L();
89  L1();
90  L2();
91})

間違い箇所のご指摘お待ちしております。

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

回答2件

ベストアンサー

インターバルID を保持する S, S2, S3 をグローバルに宣言してください.

javascript
1// スロット
2var L = function() {
3  var S = setInterval(R, 400);
4  S;
5}
6
7var L1 = function() {
8  var S1 = setInterval(R1, 250);
9  S1;
10}
11
12var L2 = function() {
13  var S2 = setInterval(R2, 100);
14  S2;
15}

現状は、インデント整形すると上記のようになり、clearInterval(undefined) となっています。

javascript の書き方として Google JavaScript Style Guide 和訳で「スペース」と検索すると、誰もが読みやすいインデントの方法が記載されています。

インデントしていないと、自分自身ですら読み間違ってしまいます。

追記）
頂いたコメントでは、返り値のない関数に置き換わっています。
回答でお伝えしたかったのは、setInterval(), clearInterval() を呼ぶ別々の関数から参照可能なスコープ上でインターバルIDを保持しましょうということです。

javascript
1// スロット
2var S; // L(), P() から参照できるようにする
3var L = function() {
4  S = setInterval(R, 400);
5}
6
7var S1; // L1(), P1() から参照できるようにする
8var L1 = function() {
9  S1 = setInterval(R1, 250);
10}
11
12var S2; // L2(), P2() から参照できるようにする
13var L2 = function() {
14  S2 = setInterval(R2, 100);
15}

投稿2019/12/17 09:24

編集2019/12/17 22:30

AkitoshiManabe

総合スコア5434

dda

2019/12/17 11:50

コメントありがとうございます。 http://cou929.nu/data/google_javascript_style_guide/で勉強させていただきます！質問のほうなのですが、 // 変数化 var S = function(){setInterval(R, 400);}; var S1 = function(){setInterval(R1, 250);}; var S2 = function(){setInterval(R2, 100);}; // スロット var L = function() { S(); } var L1 = function() { S1(); } var L2 = function() { S2(); } // ストップ P.addEventListener('click',()=> { clearInterval(S); }) P1.addEventListener('click',()=> { clearInterval(S1); }) P2.addEventListener('click',()=> { clearInterval(S2); }) としても作動しません。もしほかに思い当たる節があれば、ご指摘いただけると幸いです。

AkitoshiManabe

2019/12/17 22:30

追記しました。

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

javascript
1var L1 = function() {
2   var S1 = setInterval(R1, 250);
3   S1;   
4}

これだと、S1はL1内で消滅する。

javascript
1var S1;
2var L1 = function() {
3   S1 = setInterval(R1, 250);
4}

こう変更するといいよ。

詳しくは変数のスコープについて調べて。

投稿2019/12/17 23:24

fijino

総合スコア136

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

js clearIntervalが作動しません。

関連した質問