javascript クリックしても時間が表示されない

ボタンをクリックするとそのときの時間を取得するプログラムをつくっているんですが、うまく動きません。
エラーは履いてないので、スペルミスのような気がするのですがわからないので教えていただけませんか？

![ここに言語を入力ここに言語を入力
コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>TIMER</title>
</head>
<body>
    <div class="container">
     <p id="timer">00:00:00:00</p>  
     
     <button id="strat_stop" class="btn btn-lg btn-primary">START</button>
 
</div>
        <script>
         //ゼロを追加する
         var addZero = function(value) {
         if (value < 10) {
             value = '0' + value;
         }
         return value;
         }

         document.getElementById('start_stop').addEventListener('click',function() {
         var now = new Date();
         var seconds = now.getSeconds(); //秒取得
         seconds = addZero(seconds);

         var minutes = now.getMinutes(); //分取得
         minutes = addZero(minutes);

         var hours = now.getHours(); //時取得
         hours = addZero(hours);

         document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;      
         });
         
      
        </script>  
</body>
</html>
イメージ説明
```](6c7d1829c83451bf073ef99cb4f17dd6.png)

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

回答1件

ベストアンサー

html
1     <button id="strat_stop" class="btn btn-lg btn-primary">START</button>

と

html
1         document.getElementById('start_stop').addEventListener('click',function() {

でidの指定がばらばらのためエラー出てました。(buttonのid指定がスペルミスですね)

※多分プログラムやってみようっていう感じで頑張ってらっしゃると思いますので、参考程度で
dayjs
っていうライブラリを利用すると

html
1  document.getElementById('strat_stop').addEventListener('click',function() {
2    document.getElementById('timer').innerHTML = dayjs().format('HH:mm:ss');
3  });

で終わります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8  <link rel="stylesheet" href="css/style.css">
9  <script src="https://unpkg.com/dayjs"></script>
10  <script src="https://unpkg.com/dayjs@1.7.7/locale/ja.js"></script>
11  <title>TIMER</title>
12</head>
13<body>
14<div class="container">
15  <p id="timer">00:00:00:00</p>
16  <button id="strat_stop" class="btn btn-lg btn-primary">START</button>
17</div>
18<script>
19  dayjs.locale('ja');
20  document.getElementById('strat_stop').addEventListener('click',function() {
21    document.getElementById('timer').innerHTML = dayjs().format('HH:mm:ss');
22  });
23</script>
24</body>
25</html>