\r\ndemo\r\n\r\n\r\n
\r\n

ページを開いた日時:

\r\n

3週間後:

\r\n

3週間後が祝日ならその次の日:

\r\n
\r\n\r\n\r\n```\r\n\r\n```javascript\r\nconst weekdays = ['日', '月', '火', '水', '木', '金', '土'];\r\n\r\n// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv\r\nconst holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称\r\n2020/1/1,元日\r\n2020/1/13,成人の日\r\n2020/2/11,建国記念の日\r\n2020/2/23,天皇誕生日\r\n2020/2/24,休日\r\n2020/3/20,春分の日\r\n2020/4/29,昭和の日\r\n2020/5/3,憲法記念日\r\n2020/5/4,みどりの日\r\n2020/5/5,こどもの日\r\n2020/5/6,休日\r\n2020/7/23,海の日\r\n2020/7/24,スポーツの日\r\n2020/8/10,山の日\r\n2020/9/21,敬老の日\r\n2020/9/22,秋分の日\r\n2020/11/3,文化の日\r\n2020/11/23,勤労感謝の日\r\n`.split(/\\r\\n+/).map(row => row.split(',')[0]);\r\n\r\nconst now = Date.now();\r\nconst today = new Date(now);\r\nconst afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000);\r\n// 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒\r\n\r\nlet ifHolidayDate = new Date(afterThreeWeek.getTime());\r\nwhile (holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}\r\n/${ifHolidayDate.getMonth() + 1}/${ifHolidayDate.getDate()}`) !== -1) {\r\n ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);\r\n}\r\n\r\ndocument.getElementById('today').textContent = `${today.getFullYear()}\r\n/${today.getMonth() + 1}/${today.getDate()} (${weekdays[today.getDay()]})`;\r\ndocument.getElementById('after3weeks').textContent =\r\n `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth() + 1}\r\n/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;\r\ndocument.getElementById('after3weeksIfHoliday').textContent =\r\n `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth() + 1}\r\n/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;\r\n```\r\n\r\n画像はjavascriptのエラー文です。\r\n![イメージ説明](db2474875e0679c14db2223b4d2fc3db.png)","answerCount":3,"upvoteCount":0,"datePublished":"2020-01-15T01:49:47.620Z","dateModified":"2020-01-15T09:03:37.237Z","acceptedAnswer":{"@type":"Answer","text":"# 解決策\r\n``````\r\nこの行をタグの直前に配置すると正常に動作しました。\r\n\r\n# 理由\r\nなぜかというと、HTMLファイルは上から順に処理されます。\r\nタグ内を処理しているときにjavascriptを実行してしまうと、まだタグが処理されていないので、javascript内で記述されている各ID属性が見つからずにエラーを起こしていたと考えられます。画像②のエラー文はID属性('today')が見つからないために起こっています。\r\n\r\n画像①\r\n![イメージ説明](c640d6116aeebe878ea99f66778931f5.png)\r\n画像②\r\n![イメージ説明](862f0a9c3844965c12d60a05af7b6cf5.png)\r\n\r\n# アドバイス\r\nATOMはそんなに使ったことないのでわかりませんが、HTMLを実行するときはGoogle Chromeを使用することをおすすめします。F12ボタンを押してデベロッパーツールのConsoleにエラーが起こったときのエラー文が記載されます。エラー原因の切り分けに役に立ちますよ。","dateModified":"2020-01-16T15:46:21.353Z","datePublished":"2020-01-16T15:46:21.353Z","upvoteCount":1,"url":"https://teratail.com/questions/235193#reply-342780"},"suggestedAnswer":[{"@type":"Answer","text":"scriptを読み込んでいません。\r\n\r\nWEBエディタでは一般的に両者を自動で結び付けてくれますが、一般的なエディタ（AtomやVim、VSCode）や本番環境では自分で紐付ける必要があります。\r\n\r\n```HTMl\r\n\r\n```","dateModified":"2020-01-15T02:06:55.935Z","datePublished":"2020-01-15T02:02:42.805Z","upvoteCount":1,"url":"https://teratail.com/questions/235193#reply-342264","comment":[{"@type":"Comment","text":"前回も今回の質問にも答えてくださりありがとうございます！\r\nコピーして貼り付けましたが、やはり反応がありませんでした・・。\r\njavascript内でエラー文が出ているのでそれが原因かと思ったのですが、エラー文の意味が分からず、、\r\n編集でJS内のエラー文を出したのでお時間があれば教えていただきたいです。","datePublished":"2020-01-15T02:32:25.004Z","dateModified":"2020-01-15T02:32:25.004Z"},{"@type":"Comment","text":"@asuchi0819さんの回答に補足です。\r\n\r\nscriptをタグの位置をbodyの閉じダグの後に持ってきてもダメですかね？\r\n\r\n見たところtest2.jsは読み込みと同時に上から処理が走ってしまっているので、\r\nまだbodyタグ以下のdomが作られる前に、存在していないid=todayにアクセスしてようとしてエラーになると思います。\r\n\r\njsfiddleはJSコードの箇所をwindow.onload=function()で実行しているので、動いているのかなと思います。\r\nその辺に関してはonloadイベントなどのキーワードで調べてみてください。","datePublished":"2020-01-15T10:17:02.484Z","dateModified":"2020-01-15T10:17:02.484Z"},{"@type":"Comment","text":">>storm3様\r\n返信が遅くなり申し訳ありません。\r\n分かりやすい説明で教えてくださってありがとうございます！\r\n他の方からも同じ回答をいただき、先ほど確認したところ日付が確認できました。\r\nonload等のことについて全く理解できていなかったので理解できるようにしておきたいと思います。\r\nありがとうございました！","datePublished":"2020-01-17T03:27:40.345Z","dateModified":"2020-01-17T03:27:40.345Z"}]},{"@type":"Answer","text":"＜head＞タグの中に下記のような記述が必要かと思います。\r\n```\r\n\r\n\r\n```\r\n以下参考記事です。\r\n\r\n▼参考記事\r\n[今すぐ覚えられる！HTMLでJavaScriptを呼び出す方法【初心者向け】](https://techacademy.jp/magazine/9650)","dateModified":"2020-01-15T02:06:22.776Z","datePublished":"2020-01-15T02:01:34.352Z","upvoteCount":1,"url":"https://teratail.com/questions/235193#reply-342262","comment":[{"@type":"Comment","text":"jQueryが必要という根拠を教えていただいてもよろしいでしょうか？","datePublished":"2020-01-15T02:03:45.894Z","dateModified":"2020-01-15T02:03:45.894Z"},{"@type":"Comment","text":"サンプルの記述として書いたので、関係ないです。\r\n紛らわしいので修正します！","datePublished":"2020-01-15T02:05:47.227Z","dateModified":"2020-01-15T02:05:47.227Z"},{"@type":"Comment","text":"サイトも添付してくださりありがとうございます！\r\n
teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問htmlにjavascriptが反応されない

Q&A

解決済

3回答

3815閲覧

htmlにjavascriptが反応されない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

Atom (テキストエディタ)
HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/01/15 01:49

編集2020/01/15 09:03

0

0

teratail内で回答をいただき(https://teratail.com/questions/235141)、早速Atomを使ってhtmlとjavascriptに入れてみたのですが、反応がありません。
webで確認しても出てきませんでした。
JSFiddleとJS Binという２つのサイトで試すと反応しました。

AtomではLinter-ESLintを使って構文チェックをしています。
これ以外になにか必要なものはあるのでしょうか。
パソコンやAtom内の設定の問題でしょうか。

何が原因なのか分からないので教えていただきたいです。

Atom
JSFiddle

--追記3--
お二方様の回答で<script>をいれましたが反応がありませんでした。
javascriptにエラー文が出ていますが空白を入れたら直るものばかりでしたのでコードは空白を入れた以外何も触っていません。
変更した後のを貼ったほうが良いとのことでしたので、<script>を入れたhtmlとjavascriptを載せます。

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<script src=javascript/test2.js></script>
6<title>demo</title>
7</head>
8<body>
9<main>
10  <p>ページを開いた日時: <span id="today"></span></p>
11  <p>3週間後: <span id="after3weeks"></span></p>
12  <p>3週間後が祝日ならその次の日: <span id="after3weeksIfHoliday"></span></p>
13</main>
14</body>
15</html>
javascript
1const weekdays = ['日', '月', '火', '水', '木', '金', '土'];
2
3// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv
4const holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称
52020/1/1,元日
62020/1/13,成人の日
72020/2/11,建国記念の日
82020/2/23,天皇誕生日
92020/2/24,休日
102020/3/20,春分の日
112020/4/29,昭和の日
122020/5/3,憲法記念日
132020/5/4,みどりの日
142020/5/5,こどもの日
152020/5/6,休日
162020/7/23,海の日
172020/7/24,スポーツの日
182020/8/10,山の日
192020/9/21,敬老の日
202020/9/22,秋分の日
212020/11/3,文化の日
222020/11/23,勤労感謝の日
23`.split(/\r\n+/).map(row => row.split(',')[0]);
24
25const now = Date.now();
26const today = new Date(now);
27const afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000);
28// 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒
29
30let ifHolidayDate = new Date(afterThreeWeek.getTime());
31while (holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}
32/${ifHolidayDate.getMonth() + 1}/${ifHolidayDate.getDate()}`) !== -1) {
33  ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);
34}
35
36document.getElementById('today').textContent = `${today.getFullYear()}
37/${today.getMonth() + 1}/${today.getDate()} (${weekdays[today.getDay()]})`;
38document.getElementById('after3weeks').textContent =
39 `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth() + 1}
40/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
41document.getElementById('after3weeksIfHoliday').textContent =
42 `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth() + 1}
43/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;

画像はjavascriptのエラー文です。
イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ryupe
Ryupe

2020/01/15 05:51

回答者2名のアドバイスを受けた後のhtmlのコードを張り付けてもらえますか？ あと、jsの方はエラーが出る場合、jsのコード全文貼ってもらわないと回答のしようがありません。
退会済みユーザー

退会済みユーザー

2020/01/15 09:00

返信が遅くなり申し訳ありません。 先ほど追記３としてhtmlとjavascriptのコードを載せました。 もしお時間があれば教えていただきたいです。
guest

回答3件

0

ベストアンサー

解決策

<script src="javascript/test2.js"></script>
この行を</body>タグの直前に配置すると正常に動作しました。

理由

なぜかというと、HTMLファイルは上から順に処理されます。

<head>タグ内を処理しているときにjavascriptを実行してしまうと、まだ<body>タグが処理されていないので、javascript内で記述されている各ID属性が見つからずにエラーを起こしていたと考えられます。画像②のエラー文はID属性('today')が見つからないために起こっています。

画像①
イメージ説明
画像②
イメージ説明

アドバイス

ATOMはそんなに使ったことないのでわかりませんが、HTMLを実行するときはGoogle Chromeを使用することをおすすめします。F12ボタンを押してデベロッパーツールのConsoleにエラーが起こったときのエラー文が記載されます。エラー原因の切り分けに役に立ちますよ。

投稿2020/01/16 15:46

Ryupe
Ryupe

総合スコア426

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/01/17 03:33

返信が遅くなり申し訳ありません。 先ほど</body>の直前に入れたら無事に日付が確認できました！ エラーの原因もわかりやすく説明してくださってありがとうございます。 Chromeは検索でしか使ってなかったので使ってみたいと思います。 お忙しい中教えてくださりありがとうございました！
guest

0

scriptを読み込んでいません。

WEBエディタでは一般的に両者を自動で結び付けてくれますが、一般的なエディタ（AtomやVim、VSCode）や本番環境では自分で紐付ける必要があります。

HTMl
1<script src=javascript/test2.js></script>

投稿2020/01/15 02:02

編集2020/01/15 02:07
kyoya0819
kyoya0819

総合スコア10434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/01/15 02:32

前回も今回の質問にも答えてくださりありがとうございます！ コピーして貼り付けましたが、やはり反応がありませんでした・・。 javascript内でエラー文が出ているのでそれが原因かと思ったのですが、エラー文の意味が分からず、、 編集でJS内のエラー文を出したのでお時間があれば教えていただきたいです。
storm3
storm3

2020/01/15 10:17

@asuchi0819さんの回答に補足です。 scriptをタグの位置をbodyの閉じダグの後に持ってきてもダメですかね？ 見たところtest2.jsは読み込みと同時に上から処理が走ってしまっているので、 まだbodyタグ以下のdomが作られる前に、存在していないid=todayにアクセスしてようとしてエラーになると思います。 jsfiddleはJSコードの箇所をwindow.onload=function()で実行しているので、動いているのかなと思います。 その辺に関してはonloadイベントなどのキーワードで調べてみてください。
退会済みユーザー

退会済みユーザー

2020/01/17 03:27

>>storm3様 返信が遅くなり申し訳ありません。 分かりやすい説明で教えてくださってありがとうございます！ 他の方からも同じ回答をいただき、先ほど確認したところ日付が確認できました。 onload等のことについて全く理解できていなかったので理解できるようにしておきたいと思います。 ありがとうございました！
guest

0

＜head＞タグの中に下記のような記述が必要かと思います。

<script type="text/javascript" src="exam.js"></script>

以下参考記事です。

▼参考記事
今すぐ覚えられる！HTMLでJavaScriptを呼び出す方法【初心者向け】

投稿2020/01/15 02:01

編集2020/01/15 02:06
kaori_oka
kaori_oka

総合スコア176

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819
kyoya0819

2020/01/15 02:03

jQueryが必要という根拠を教えていただいてもよろしいでしょうか？
kaori_oka
kaori_oka

2020/01/15 02:05

サンプルの記述として書いたので、関係ないです。 紛らわしいので修正します！
退会済みユーザー

退会済みユーザー

2020/01/15 02:15

サイトも添付してくださりありがとうございます！ <script>をいれないといけないのをすっかり忘れていました。 回答してくださりありがとうございます！
kaori_oka
kaori_oka

2020/01/15 02:21

@asuchi0819ご指摘ありがとうございます！
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

htmlにjavascriptが反応されない