【JavaScript】setIntervalを使うときの注意点(...とonload) #JavaScript

こんにちは。

さておもいっきしツマづいてしまったところです。

Jsは外部ファイルから読み込んでいるのですが、
setInterval関数をつかって、日時をリアルタイムに(1秒周期)表示させていこうという魂胆です。

実際に書いたコード

function nowTime(){

  nowD       = new Date();

  nowHours  = nowD.getHours();
  nowMinutes = nowD.getMinutes();
  nowSeconds = nowD.getSeconds();

  nowMess = nowHours + "時" + nowMinutes + "分" + nowSeconds + "秒";
  document.nowForm.nowFormTime.value = nowMess;
  setInterval("nowTime()",1000);
}

関数メモ：

// ----------
setInterval("関数名",起動するミリ秒)
// ----------

<form name="nowForm">
    <input type="text" name="nowFormTime">
</form>

はい、何も表示されませんでした。

どうやら、formが読み込まれる前に
このnowTime関数が実行されてしまったら、値は空でエラーになって帰ってくる模様。

HTMLのform定義が終わったあとにJavaScriptでsetIntervalを書けばいいということですが
下記で対応。

<body onload='setInterval(nowTime(),1000)'>

ページを全て読み込ませてからスクリプトを実行させたい時は
このonloadを使います。

それでは、これからもよろしくお願いいたします。

追記：

nowTime()のなかでsetInterval("nowtime()",1000)を実行すると、タイマーがどんどん増えていき
クラッシュするとご指摘をいただきました。

下記onloadを使わずに、タイマーを使う修正内容です。

function nowTime(){

  nowD       = new Date();

  nowHours  = nowD.getHours();
  nowMinutes = nowD.getMinutes();
  nowSeconds = nowD.getSeconds();

  nowMess = nowHours + "時" + nowMinutes + "分" + nowSeconds + "秒";
  document.nowForm.nowFormTime.value = nowMess;

 }

setInterval("nowTime()",1000);

上部に記述したのはsetInterval()をnowTime()の中に入れていました。
だからonloadで実行してしまうとタイマーも増え、いずれはブラウザがクラッシュ。
そして外から読んであげないと実行されない。

勉強になります。

これからもよろしくお願いいたします。