JavascriptのコードがHTMLに反映されない

Javascriptの参考書を見ながらタイマー処理のコードを書いているのですが、HTMLのid='result'の要素に時間が表記されません。

HTML
1<!doctype html>
2<html class="no-js" lang="ja">
3
4<body> 
5  <input id ="btn" type="button" value="タイマー停止" />
6  <div id ="result"></div>
7</body>
8
9</html>

Javascript
1document.addEventListener('DOMContentLoaded',function(){
2  //タイマーを設置
3  var timer = setInterval(
4    //現在の時刻を<div id='result'>要素に表示(5000ミリ秒ごとに更新)
5    function(){
6      var dat = new Date();
7      document.getElementById('result').textContent = dat.toLocaleTimeString();
8    },5000);
9  
10//ボタンクリック時にタイマー処理を中止
11  document.getElementById('btn').addEventListener('click', function(){
12    window.clearInterval(timer);
13  },false);
14},false);
15

HTMLにJavascriptのファイルを読み込ませたりしてみましたが、それでも表記されませんでした。
すごく初歩的な質問だとは思いますが、ご教示お願いいたします。

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

回答2件

ベストアンサー

動くサンプル：https://jsfiddle.net/9ovb1hds/

コード自体は提示されたコードで動きます。
提示されたコード内にJavaScriptを読み込む記載が無いので、それが必要なのでは？

投稿2021/02/20 04:06

kei344

総合スコア69407

kzy2

2021/02/20 07:27

ありがとうございます！解決いたしました。

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

diff
1-<input id ="btn" type="button" value="タイマー停止" />
2-  <div id ="result"></div>
3+<input id="btn" type="button" value="タイマー停止" />
4+  <div id="result"></div>