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

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

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

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

Q&A

解決済

2回答

1109閲覧

【javascript】カウントダウンを任意の値で停止させボタンを押させたい

tajix_japan

総合スコア132

JavaScript

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

0グッド

0クリップ

投稿2022/01/08 11:53

下記のスクリプトは10秒前からのカウントダウンをすることができ、「スタート・ストップ・リセットボタン」が機能します。
しかしながら、0以下でも表示され続け、永遠にマイナスの数字が膨れ上がります。

また、上記とは別のスクリプトにより、「ボタン1」をクリックすると「ボタン1がクリックされました」というアラートが表示されます。

javascript

1 2 <span id="time"></span> 3 4 <button id="start">スタート</button> 5 <button id="stop">ストップ</button> 6 <button id="reset">リセット</button> 7 <input type="button" id="btn1" value="ボタン1" onclick="btn1Click();" /> 8 9<script> 10var spanedSec = 10; 11var time; 12var startButton; 13var stopButton; 14var resetButton; 15var intervalId; 16window.onload = function() { 17 time = document.getElementById('time'); 18 time.innerHTML = spanedSec; 19 startButton = document.getElementById('start'); 20 stopButton = document.getElementById('stop'); 21 resetButton = document.getElementById('reset'); 22 23 startButton.onclick = function() { 24 start(); 25 }; 26 27 stopButton.onclick = function() { 28 stop(); 29 }; 30 31 resetButton.onclick = function() { 32 reset(); 33 }; 34}; 35function start() { 36 if (intervalId == null) { 37 intervalId = setInterval(function(){ 38 spanedSec--; 39 time.innerHTML = spanedSec; 40 }, 1000); 41 } 42} 43 44function stop() { 45 clearInterval(intervalId); 46 intervalId = null; 47} 48 49function reset() { 50 spanedSec = 10; 51 time.innerHTML = spanedSec; 52} 53 54</script> 55 56 57<script> 58function btn1Click(){ 59 alert('ボタン1がクリックされました'); 60} 61</script> 62 63

やりたいこと。

カウントダウンが0になったら、カウントダウンを停止し、「ボタン1」をクリック=「ボタンがクリックされました」というアラートを表示させたいです。

やってみたこととしては、
if (intervalId=== 0) {
clearInterval(intervalId);
intervalId = null;
document.getElementById("btn1").click();
}
というスクリプトを入れてみましたがまったく機能しません。

下記がテスト仕様です。
カウントダウンは相変わらず機能しますが、0以下の表示がされることに変わりはあせません

javascript

1 2 <span id="time"></span> 3 4 <button id="start">スタート</button> 5 <button id="stop">ストップ</button> 6 <button id="reset">リセット</button> 7 <input type="button" id="btn1" value="ボタン1" onclick="btn1Click();" /> 8 9<script> 10var spanedSec = 10; 11var time; 12var startButton; 13var stopButton; 14var resetButton; 15var intervalId; 16window.onload = function() { 17 time = document.getElementById('time'); 18 time.innerHTML = spanedSec; 19 startButton = document.getElementById('start'); 20 stopButton = document.getElementById('stop'); 21 resetButton = document.getElementById('reset'); 22 23 startButton.onclick = function() { 24 start(); 25 }; 26 27 stopButton.onclick = function() { 28 stop(); 29 }; 30 31 resetButton.onclick = function() { 32 reset(); 33 }; 34}; 35function start() { 36 if (intervalId == null) { 37 intervalId = setInterval(function(){ 38 spanedSec--; 39 time.innerHTML = spanedSec; 40 }, 1000); 41 42 if (intervalId=== 0) { 43 clearInterval(intervalId); 44 intervalId = null; 45 document.getElementById("btn1").click(); 46 } 47 48 } 49} 50 51function stop() { 52 clearInterval(intervalId); 53 intervalId = null; 54} 55 56function reset() { 57 spanedSec = 10; 58 time.innerHTML = spanedSec; 59} 60 61</script> 62 63 64<script> 65function btn1Click(){ 66 alert('ボタン1がクリックされました'); 67} 68</script> 69 70

どうすれば、カウントダウンが0になったと同時にボタン1が押され、カウントダウンが停止するようになりますでしょうか?

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

自己解決

下記で自己解決できました。

<span id="time"></span>

<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
<input type="button" id="btn1" value="ボタン1" onclick="btn1Click();" />

<script> var spanedSec = 10; var time; var startButton; var stopButton; var resetButton; var intervalId; window.onload = function() { time = document.getElementById('time'); time.innerHTML = spanedSec; startButton = document.getElementById('start'); stopButton = document.getElementById('stop'); resetButton = document.getElementById('reset'); startButton.onclick = function() { start(); }; stopButton.onclick = function() { stop(); }; resetButton.onclick = function() { reset(); }; }; function start() { if (intervalId == null) { intervalId = setInterval(function(){ spanedSec--; time.innerHTML = spanedSec; if (spanedSec< 0) { clearInterval(intervalId); intervalId = null; document.getElementById("btn1").click(); } }, 1000); } } function stop() { clearInterval(intervalId); intervalId = null; } function reset() { spanedSec = 10; time.innerHTML = spanedSec; } </script> <script> function btn1Click(){ alert('ボタン1がクリックされました'); } </script>

投稿2022/01/08 12:49

tajix_japan

総合スコア132

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

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

0

数字を変更するsetIntervalのなかにある関数でspannedSecの値をチェックするコードがないので、リセットやストップボタン押さない限りずっと続きますよ
そこにif(spanedSec>0)のようなチェックを入れればマイナスにいかないと思います

投稿2022/01/08 12:28

wasd0109

総合スコア93

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

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

tajix_japan

2022/01/08 12:50

有難うございます。 ご指摘いただきました内容を参考に自己解決できました。 大変助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問