Q&A
ヒントだけだと「MDNリファレンスで機能概要確認してね」レベルの回答になるのですけど、それで良いのでしょうか。
実現したいこと
javascriptでランダムにテキストを表示するサイトを作りたいと考えております。
「停止」ボタンの押すといったんsetintervalが停止し、再度ボタンを押すとsetintervalが再開するようにしたいのですが、clearintervalをどのように使えばいいのかがわかりません。
大変初歩的な質問なのは理解しております。ヒントだけでもよいので教えていただければと思います。
該当のソースコード
【HTML】 <html> <head> <meta charset="UTF-8"> <title>many article</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="text1"><script type="text/javascript" src="js1.js"></script></div> <button id="stop">停止</button> </body> </html> 【javascript】 window.addEventListener('DOMContentLoaded', ()=>{ const myMes=[ 'あああ', 'いいい', 'ううう', ]; setInterval(()=>{ const myRnd = Math.floor( Math.random() * myMes.length ); document.querySelector('#text1').textContent=myMes[myRnd]; },2000); });
そのレベルですよね。すみません。もう少し勉強します。
いえ、質問内容からアドバイスの角度が見えなかったものですから、確認です。質問を編集してこの質問のゴールを明示してください。
回答1件
0
ベストアンサー
グローバル変数でタイマーIDを保持しておき、停止ボタンが押されたらclearInterval() すればよいです。
javascript
1// グローバル変数 2let intervalID = 0; 3 4... 5 6 // window.addEventListener() 内 7 // setInterval(...) の代わりにtoggleIntervalTimer()を呼ぶ 8 toggleIntervalTimer(); 9 10... 11 12 // ボタンが押されたときのコード 13function toggleIntervalTimer() { 14 if (intervalID > 0) { 15 clearInterval(intervalID); 16 intervalID = 0; 17 } else { 18 intervalID = setInterval(...); 19 } 20}
投稿2021/01/25 02:17
総合スコア21008
ご回答ありがとうございます。
わからない部分が多いので、これから調べてみます！
すみません。基本的なことなのですが、一つだけ教えていただけますか。
HTMLの「停止」ボタンとはどう関連付ければよいのでしょうか。。
参考にどうぞ
<script>
var x=0;
</script>
<input type="button" value="Start" onclick="timerID=setInterval('aaa.innerText=x;x++',1000)">
<input type="button" value="Stop" onclick="clearInterval(timerID)">
<div id="aaa"></div>
DOMContentLoadedリスナの中を、
toggleIntervalTimer();
document.querySelector('#stop').addEventListener('click', toggleIntervalTimer);
とすれば良いかと。
(注: 完全なコードを書くのは故意に避けてます)
重ね重ねすみません。
ありがとうございました。
勉強していきます！
あなたの回答
tips
プレビュー
