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

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

ただいまの
回答率

89.71%

htmlにjavascriptが反応されない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 305

hemoglobin

score 3

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

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

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

Atom
JSFiddle

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

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src=javascript/test2.js></script>
<title>demo</title>
</head>
<body>
<main>
  <p>ページを開いた日時: <span id="today"></span></p>
  <p>3週間後: <span id="after3weeks"></span></p>
  <p>3週間後が祝日ならその次の日: <span id="after3weeksIfHoliday"></span></p>
</main>
</body>
</html>
const weekdays = ['日', '月', '火', '水', '木', '金', '土'];

// https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv
const holidaysCsvFromCabinetOffice = `国民の祝日・休日月日,国民の祝日・休日名称
2020/1/1,元日
2020/1/13,成人の日
2020/2/11,建国記念の日
2020/2/23,天皇誕生日
2020/2/24,休日
2020/3/20,春分の日
2020/4/29,昭和の日
2020/5/3,憲法記念日
2020/5/4,みどりの日
2020/5/5,こどもの日
2020/5/6,休日
2020/7/23,海の日
2020/7/24,スポーツの日
2020/8/10,山の日
2020/9/21,敬老の日
2020/9/22,秋分の日
2020/11/3,文化の日
2020/11/23,勤労感謝の日
`.split(/\r\n+/).map(row => row.split(',')[0]);

const now = Date.now();
const today = new Date(now);
const afterThreeWeek = new Date(now + 3 * 7 * 24 * 60 * 60 * 1000);
// 3週 * 7日 * 24時間 * 60分 * 60秒 * 1000ミリ秒

let ifHolidayDate = new Date(afterThreeWeek.getTime());
while (holidaysCsvFromCabinetOffice.indexOf(`${ifHolidayDate.getFullYear()}
/${ifHolidayDate.getMonth() + 1}/${ifHolidayDate.getDate()}`) !== -1) {
  ifHolidayDate = new Date(ifHolidayDate.getTime() + 24 * 60 * 60 * 1000);
}

document.getElementById('today').textContent = `${today.getFullYear()}
/${today.getMonth() + 1}/${today.getDate()} (${weekdays[today.getDay()]})`;
document.getElementById('after3weeks').textContent =
 `${afterThreeWeek.getFullYear()}/${afterThreeWeek.getMonth() + 1}
/${afterThreeWeek.getDate()} (${weekdays[afterThreeWeek.getDay()]})`;
document.getElementById('after3weeksIfHoliday').textContent =
 `${ifHolidayDate.getFullYear()}/${ifHolidayDate.getMonth() + 1}
/${ifHolidayDate.getDate()} (${weekdays[ifHolidayDate.getDay()]})`;

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Ryupe

    2020/01/15 14:51

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

    キャンセル

  • hemoglobin

    2020/01/15 18:00

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

    キャンセル

回答 3

checkベストアンサー

+1

解決策

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

理由

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

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

アドバイス

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/17 12:33

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

    キャンセル

+1

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

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


以下参考記事です。

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 11:03

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

    キャンセル

  • 2020/01/15 11:05

    サンプルの記述として書いたので、関係ないです。
    紛らわしいので修正します!

    キャンセル

  • 2020/01/15 11:15

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

    キャンセル

  • 2020/01/15 11:21

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

    キャンセル

+1

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/15 11:32

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

    キャンセル

  • 2020/01/15 19:17

    @asuchi0819さんの回答に補足です。

    scriptをタグの位置をbodyの閉じダグの後に持ってきてもダメですかね?

    見たところtest2.jsは読み込みと同時に上から処理が走ってしまっているので、
    まだbodyタグ以下のdomが作られる前に、存在していないid=todayにアクセスしてようとしてエラーになると思います。

    jsfiddleはJSコードの箇所をwindow.onload=function()で実行しているので、動いているのかなと思います。
    その辺に関してはonloadイベントなどのキーワードで調べてみてください。

    キャンセル

  • 2020/01/17 12:27

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

    キャンセル

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

  • ただいまの回答率 89.71%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる