3分タイマーの動作するコードで理解できない点を教えて頂きたいです。

閲覧ありがとうございます。

半年前に某プログラミングスクールのJAVASCRIPTのレッスンで
カウントダウンタイマーを作成したのですが、
半年前の動作条件をクリアしているコードとコメントを見ても理解できない点をございました。
今はスクールの先生に質問が出来ず、自分で調べても理解できなかったので理解できる方いましたら教えて頂けませんでしょうか。

条件
●カウントは03:00からスタートする
●スタートボタンを押すと1秒ずつカウントが進む
●カウントが00:00になったら「Time UP!」と表示する
●ストップボタンを押すとカウントが止まる
●リセットボタンを押すとカウントが03:00に戻り、カウントが止まる

↓以下動作条件をクリアしたコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイマー</title>
<link rel="stylesheet" href="timer.css">

<script>
var counter; //タイマーの減る時間変数宣言
var time = 180　//タイマーの最初の時間宣言

function countStart(){　//スタートを押したときの関数
  counter = setInterval(count, 500);　//setInterval…一定時間ごとに特定の処理を繰り返す
}

function countStop(){ //カウントを止める関数設定
  clearInterval(counter);　
}

function countReset(){　//カウントをリセットする関数
  countStop();
  time = 180;
  display();
}

function display(message){
  var messageLabel = document.getElementById('messageLabel');　//65行目の出力するid設定
  if (!message) { //messageがtureの場合にfalse、messageがfalseの場合にture
    var second = time % 60; //剰余 余りで分を求めている
    var minitue = Math.floor(time / 60);　 //分を求めいている関数　小数点以下は切り下げ
    messageLabel.innerHTML =  + minitue + ":" +(second < 10 ? "0": "") + second; 
    //三項演算子は式a、b、cに対して、a ? b : cという形を取る。始めにaを評価してその評価値が、真である時はbを評価してその評価値を返し、偽である時はcを評価してその評価値を返す。
  }
 else {
    var id =document.getElementById('message');
    messageLabel.innerHTML = message;
  }

}

/*カウントが終わったらtime up!と表示させて色を変える関数*/
function count() {
  if (time === 0) {      
    countStop();
    display("time up!");
  } else {
    time -= 1;
    display();
  }
}

window.onload = function(){
  //var timerlavel= document.getElementById('timerLavel');
  var start = document.getElementById('start_button');
  var stop = document.getElementById('stop_button');
  var reset = document.getElementById('reset_button');
  start.addEventListener('click', countStart, false);
  stop.addEventListener('click', countStop, false);
  reset.addEventListener('click', countReset, false);
  display();
}

</script>
</head>
<body>
  <div class="container">
    <h1 class="title">Stop watch</h1>
    <h1 id="messageLabel"><span id ="min">00</span>:<span id ="sec">00</span></h1>
    <div>
      <button id="start_button">スタート</button>
      <button id="stop_button">ストップ</button>
      <button id="reset_button">リセット</button>
    </div>
  </div>
</body>
</html>

以下上記のコード内で理解できない点
⓵なぜ変数var id を設定する必要があるのか
⓶function displayの引数である('message')をvar id =document.getElementById(id)のidにあたる場所に入れている理由
③ messageLabel.innerHTML = message;でfunction display(message)の引数messageをmessageLabelに書きかえている理由

　　var id =document.getElementById('message');
    messageLabel.innerHTML = message;

以上、お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

⓵なぜ変数var id を設定する必要があるのか
⓶function displayの引数である('message')をvar id =document.getElementById(id)のidにあたる場所に入れている理由

なくても困らないんじゃないですか？
提示したコードが全てなら、設定してもどこにも使ってないみたいですし。
②は連動してる疑問に見えるのでまとめたのですけど、ちょっと何を求めてるのか分からない。

③ messageLabel.innerHTML = message;でfunction display(message)の引数messageをmessageLabelに書きかえている理由

書き換えてないですよ。
innerHTML でmessageLabel内の要素として入れてるだけです。

それより、文字列・コメント以外のところに入りまくってる全角スペースのほうが気になりますね。

投稿2021/02/17 11:20

m.ts10806

総合スコア80875

nakayamaakg

2021/02/17 14:28 編集

回答頂きありがとうございます。確かにvar id =document.getElementById('message');はコメントアウトしてもタイマーとして問題ありませんでした。 function display(message)のif文の条件について、追加で分からない点があります.... なぜ　if (!message)とカウントダウンしているmessage引数がない場合を条件にして else {messageLabel.innerHTML=message;｝がないと、time upがでないか自分で書いたはずなのに解釈できないです。正直if文が不要なのではと思い削除したところ、undefineと表示後一定時間経った後「TIME UP」と表示されてしまいました。。勉強、ひらめき不足で大変申し訳ないのですが、解釈がもしできたら教えて頂けませんでしょうか。申し訳ございません。大文字スペースは今後消すようにします。

m.ts10806

2021/02/17 14:30

>大文字スペースは今後消すようにします。「全角」です。「大文字スペース」ってないのでは。 >自分で書いたはずなのに解釈できないです。書いてから時間たってるのですか？あと、プログラムは書いたとおりに動くので「事実」しか存在しません。下手に例えたり解釈しようとすると本質から外れます。「ひらめき」というのも必要ありません。１つ１つ処理を追い、デバッグして確かめてください。

行動規範の内容に同意します