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

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

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

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

解決済

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

tajix_japan
tajix_japan

総合スコア104

JavaScript

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

2回答

0評価

0クリップ

348閲覧

投稿2022/01/08 11:53

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

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

javascript

<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; }, 1000); } } function stop() { clearInterval(intervalId); intervalId = null; } function reset() { spanedSec = 10; time.innerHTML = spanedSec; } </script> <script> function btn1Click(){ alert('ボタン1がクリックされました'); } </script>

やりたいこと。

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

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

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

javascript

<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; }, 1000); if (intervalId=== 0) { clearInterval(intervalId); intervalId = null; document.getElementById("btn1").click(); } } } function stop() { clearInterval(intervalId); intervalId = null; } function reset() { spanedSec = 10; time.innerHTML = spanedSec; } </script> <script> function btn1Click(){ alert('ボタン1がクリックされました'); } </script>

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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