More than 3 years have passed since last update.

【JavaScript】スタートボタンを作成し、1秒毎に文字の色が変わる画面を作成せよ。停止ボタンも作成し、押下すると色の変化を止める処理を作成せよ

JavaScript

Last updated at 2021-05-11Posted at 2021-05-11

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>要素の作成・追加</title>
   <script>
   // 変数を定義
   var interval_id;
   var start_flag = false;  // スタート処理中はtrue
//--------------------------------------------------------
   function start_flash_text() {
     // 停止しているときのみ、スタート処理を開始(二重クリック防止)
     if (start_flag === false) {
       // 1秒ごとにflash_textを実行
       interval_id = setInterval(flash_text, 1000);
       start_flag = true;
     }
   }
//--------------------------------------------------------
   function flash_text() {
     var flash = document.getElementById('flash');
     // p要素の文字色を赤か青に変更
     if (flash.style.color === 'red') {
       flash.style.color = 'blue';
     } else {
       flash.style.color = 'red';
     }
   }
//--------------------------------------------------------
   function stop_flash_text() {
     // setIntervalによる繰り返し動作を停止
     clearInterval(interval_id);
     start_flag = false;
   }
//--------------------------------------------------------

   window.onload = function() {
     var start = document.getElementById('start');
     start.addEventListener('click', start_flash_text, false);
     
     var stop = document.getElementById('stop');
     stop.addEventListener('click', stop_flash_text, false);
   }
   </script>
</head>
<body>
   <p id="flash">flash text</p>
   <button id="start">start</button>
   <button id="stop">stop</button>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up