JavaScriptで西暦を表示させようとするとエラーが出る

前提

ここに質問の内容を詳しく書いてください。
YouTubeを見ながらJavaScriptで西暦を表示するカレンダーを作っています。
以下の動画URL
https://youtu.be/cqjZCPxJuXk
西暦を実装中に以下のエラーメッセージが発生しました。
どうしたらいいですか？
JavaScriptに詳しい方すみませんが、宜しくお願いします。

実現したいこと

現西暦を表示させたい
ここに実現したいことを箇条書きで書いてください。

▲▲機能を動作するようにする

発生している問題・エラーメッセージ

エラーメッセージ
```Uncaught ReferenceError: time is not defined

### 該当のソースコード
function time(){
    // Dateオブジェクトで日時を取得していく！
    const date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDate();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();


document.querySelector('.year').innerHTML=year;
}
```app.js
ソースコード
```function time(){
    // Dateオブジェクトで日時を取得していく！
    const date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth()+1;
    var day = date.getDate();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    
    document.querySelector('.year').innerHTML=year;
}
```style.css
```ソースコード
```@charset "UTF-8";
/* CSSの初期化 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 全体 */
body{
    background: #e30021;
    font-family: Arial, Helvetica, sans-serif;
}
/* コンテンツ */
main{
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 100px;
    right: 100px;
    background: #f1b0b2;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
main h2{
    text-align: center;
    font-size: 10em;
    line-height: 0.7em;
    color: #fff;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
    margin-top: -50px;
    margin-bottom: 70px;
}
/* カレンダー＆時計 */
.content{
    display: flex;
}
.content div{
    position: relative;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #fff;
    margin: 0 10px;
    font-size: 3em;
    font-weight: 500;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
/* :beforeは要素の直前に値を挿入することができる疑似クラス */
.content div::before{
    /* 例 */
    content: "";
    position: absolute;
    top: -33px;
    left: 0;
    width: 100%;
    height: 35px;
    line-height: 38px;
    background: #e30021;
    font-size: 0.6em;
    color: #fff;
    font-weight: 300;
}
.content div.month::before{
    content: "月";
}
.content div.day::before{
    content: "日";
}
.content div.hour::before{
    content: "時";
}
.content div.min::before{
    content: "分";
}
.content div.sec::before{
    content: "秒";
}
```index.html
```ソースコード
```<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta namae="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>カレンダー</title>
    <link rel="stylesheet" href="style.css">
</head>
<body onload="time()">
    <main>
        <h2 class="year">0</h2>
        <div class="content">
            <div class="month">0</div>
            <div class="day">0</div>
            <div class="hour">0</div>
            <div class="min">0</div>
            <div class="sec">0</div>
        </div><!-- .content -->
    </main>
    <script src="./script.js"></script>
</body>
</html>

### 試したこと
コードを書き直しました。
ここに問題に対して試したことを記載してください。
ひたすらコードを書き直しました。
### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

app.js

<script src="./script.js"></script>

HTMLから app.js を参照していないからでしょうか。

投稿2022/09/19 23:23

int32_t

総合スコア20884

javascript
1window.onload = function time(){
2(略)
3}

として、bodyタグのonload="time()"を消してみたらどうでしょうか？

投稿2022/09/19 13:02

task58

総合スコア26

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！