JavascriptのコードをHTMLに外部読み込みさせたいです。下記のコードは現在時刻を呼び出すコードです。bodyに直接scriptを書き込むことにより複数回処理が実行され時刻を更新しています。 ```HTML Timer 0.2秒ごとに、時刻更新。 time function showTime() { let now = new Date(); document.getElementById("time").innerHTML = now.toLocaleTimeString(); } setInterval(showTime, 200); ``` 上記のコードを下記のようにHTMLとJavascriptに分けた場合、どのようにJavascriptを呼び出せば同じような動作を行うことが出来ますか？ ```HTML Timer 0.2秒ごとに、時刻更新。 time ``` ```Javascript function showTime() { let now = new Date(); document.getElementById("time").innerHTML = now.toLocaleTimeString(); } setInterval(showTime, 200); ```

[document.addEventListenerでDOMContentLoadedを指定する](https://noumenon-th.net/programming/2017/06/11/domcontentloaded/)とかそういう話ですかね。 headにそのまま書くと通常はDOM読み込む前に実行されるから。

javascriptの関数を外部ファイル読み込み方式で読み込む

JavascriptのコードをHTMLに外部読み込みさせたいです。
下記のコードは現在時刻を呼び出すコードです。bodyに直接scriptを書き込むことにより複数回処理が実行され時刻を更新しています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <title>Timer</title>
6  <meta charset="UTF-8" />
7  <link rel="stylesheet" href="style.css">
8
9<body>
10  <div>0.2秒ごとに、時刻更新。</div>
11  <div id="time">time</div>
12  <script>
13    function showTime() {
14      let now = new Date();
15      document.getElementById("time").innerHTML = now.toLocaleTimeString();
16    }
17    setInterval(showTime, 200);
18  </script>
19</body>
20
21</html>

上記のコードを下記のようにHTMLとJavascriptに分けた場合、どのようにJavascriptを呼び出せば同じような動作を行うことが出来ますか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <title>Timer</title>
6  <meta charset="UTF-8" />
7  <link rel="stylesheet" href="style.css">
8  <script type="text/javascript" src="time.js"></script>
9
10<body>
11  <div>0.2秒ごとに、時刻更新。</div>
12  <div id="time">time</div>
13</body>
14
15</html>

Javascript
1function showTime() {
2  let now = new Date();
3  document.getElementById("time").innerHTML = now.toLocaleTimeString();
4}
5setInterval(showTime, 200);

x_x

2020/02/19 05:11

「void setupの用」というのは何のことですか？

退会済みユーザー

2020/02/19 05:16

すみません、説明が不十分でした。載せてあるサンプルコードの用に複数回動作させたいと言うことです。

Lhankor_Mhy

2020/02/19 05:23

やってみた結果はどうでしたか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2

x_x

2020/02/19 05:58

showTime() が何度も実行されるということであればどちらでも動いているようですが、nk598xv さんの環境では一回だけ実行(時刻が止まっている)になっているということですか？

退会済みユーザー

2020/02/19 06:07

申し訳ありません。今まで付けてなかったfunction showTime() {}をつけたら動き始めました。