JavaScriptが動作しない件について

VScodeでweb上で動作するカレンダーを作っています。
しかし、ブラウザでJavascriptが動作しません。

実現したいこと

Html Css Javascriptで動作するカレンダーを作りたいです。

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

ブラウザ、エディター共に、
エラーメッセージは出ていません。

該当のソースコード

HTML
1<body>
2
3    <main>
4
5    <h2 class="year">0</h2>
6
7    <div class="content">
8        <div class="month">0</div>
9        <div class="day">0</div>
10        <div class="hour">0</div>
11        <div class="min">0</div>
12        <div class="sec">0</div>
13
14    </div>
15
16    </main>
17
18
19
20
21    <script src="index.js"></script>
22</body>

Javascript
1function time(){
2        
3        var dt = new Date();
4        var year = date.getFullYear();
5        var month = date.getMonth() + 1;
6        var day = date.getDate();
7        var hour = date.getHours();
8        var min= date.getMinutes();
9        var sec = date.getSeconds();
10        
11
12        document.querySelector('year').innerHTML=year;
13        document.querySelector('month').innerHTML=month; 
14        document.querySelector('day').innerHTML=day; 
15        document.querySelector('hour').innerHTML=year; 
16        document.querySelector('min').innerHTML=minute; 
17        document.querySelector('sec').innerHTML=sec; 
18        }
19

試したこと

Chrome,Edge→表示されない
Blave→Html Cssのみ反映

補足情報（FW/ツールのバージョンなど）

環境：windows11
VSCode　ver 1.66.1

hoshi-takanori

2022/04/10 06:11

関数を定義してるだけで、それを呼んでないのでは…。

m.ts10806

2022/04/10 07:09

time()を呼んでる場所がないですね。

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

回答1件

ベストアンサー

1
var dt = new Date();しているのに
なぜかdateを参照しています。
var year = date.getFullYear();

2
.yearなどにinnerHTMLしようとしているように思えますが
document.querySelector('year')です

3
var min= date.getMinutes();しているのに
innerHTML=minute;です。

4
('hour').innerHTML=year;
hourに年が入ってます。

5
function time()が呼ばれていません。

これでどうでしょう？

function time() {
  var 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;
  document.querySelector(".month").innerHTML = month;
  document.querySelector(".day").innerHTML = day;
  document.querySelector(".hour").innerHTML = hour;
  document.querySelector(".min").innerHTML = min;
  document.querySelector(".sec").innerHTML = sec;
}
time();

投稿2022/04/10 06:32