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

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

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

tak_78910
tak_78910

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0リアクション

1クリップ

242閲覧

投稿2022/09/19 12:27

編集2022/09/19 12:32

前提

ここに質問の内容を詳しく書いてください。
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/ツールのバージョンなど) ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。