質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1130閲覧

js clearIntervalが作動しません。

dda

総合スコア33

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/17 09:09

編集2019/12/17 09:10

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

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})

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

インターバル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

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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); }) としても作動しません。 もしほかに思い当たる節があれば、ご指摘いただけると幸いです。
guest

0

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.50%

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

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

質問する

関連した質問