

javascriptを勉強しようと思い、下記の本に載っているコードを試しております。

「これからwebをはじめる人のHTML＆CSS、Javascriptのきほんのきほん」 - タイマー作成

しかし同じコードを書いているのにもかかわらず、①時間が取得できず、②innerHTMLプロパティメソッドを使ったHTMLでかいているp要素の時間表示の塗替えができておりません。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>TIMER</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    
    <body>
        <div class="container">
            <p id="timer">00:00:00</p>
        </div>
    
        <div>
            <button id="start_stop" class="btn btn-lg btn-danger">START</button>
        </div>
    
        <script>
            var now = new Date();
            var seconds = now.getSeconds();
            //getSecondsメソッドは現在の秒を取得できるDateオブジェクトのメソッド。実体化したことでそのメソッドがnowから(now.)使うことができるイメージ//
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            //↑とりあえず「秒」の部分を２桁表示をさせるには//
            var minutes = now.getMinutes();
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            var hours = now.getHours();
            if (hours < 10) {
                hours = '0' + hours;
            }
            document.getElementById('timer').innerHTML=hours+':'+minutes+':'+seconds;
        </script>
    
    </body>
    </html>
[/code]

何卒よろしくお願いいたします


CC BY-SA 4.0
2019-06-16T12:36:35.047
55849
2019-06-16T13:20:52.780
2019-06-16T13:20:52.780
3060
34756
question
javascript
getElementById を使った時間表示(hh:mm:ss)が反映されない件


  1. 質問文に貼られたコードで時刻の取得は出来ているように思います。

  2. [書籍のサポートサイト](https://book.mynavi.jp/supportsite/detail/9784839959715.html) でサンプルファイルが配布されていたので中身を見比べてみましたが、スタイルが書き換わらないのは **cssへのパスが間違っているから** ではないでしょうか？  
書籍では`css/style.css`の様にサブフォルダを作成してその中に実際のスタイルシートが置かれていますが、

[code]     <link rel="stylesheet" href="css/style.css">

    
[/code]

あなたの書いたHTMLでは、同じ階層にあるファイルを指定しています。

[code]     <link rel="stylesheet" type="text/css" href="style.css">

    
[/code]


CC BY-SA 4.0
2019-06-16T13:20:15.947
55850
2019-06-16T13:20:15.947
3060
55849
answer