toLocaleStringがnullになってしまっている？

前提・実現したいこと

Javascript本格入門を独学していて、HTMLで現在時刻を表示させたいのですが、エラーが出てしまいJavaScriptの読み込みの場所を変えてみたりしましたが、エラーが解消されません。コンソールログでは表示されます。

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

hello_ex.js:3 Uncaught TypeError: Cannot set property 'textContent' of null
    at hello_ex.js:3

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>JavaScript本格入門</title>
6  </head>
7  <body>
8    <script type="text/javascript"  src="hello_ex.js"></script>
9    現在時刻：<span id="result"></span>
10      <noscript>
11        JavaScriptが利用できません。
12      </noscript>
13  </body>
14</html>

Javascript
1var current = new Date();
2var result = document.getElementById('result');
3result.textContent = current.toLocaleString();

試したこと

HTML側で読み込み位置を変更した。

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

回答2件

ベストアンサー

原因としては、

js
1 document.getElementById('result');

で、 id="result"に一致する要素(<span id="result"></span>)が見つからなかったからでしょう。みてみると、

html
1    <script type="text/javascript"  src="hello_ex.js"></script>
2    現在時刻：<span id="result"></span>

での、<span id="result></span>の前に、スクリプトを読み込んでいるからでしょう。

この場合、ブラウザが```<span id="result">````を読み込む前に、scriptの方が先に実行していまうため、要素が見つからなかっのでしょう。

解決としては、大きく2通りで、

scriptの読み込み位置を<span>タグの後に置く
jsを修正して、Htmlが完全に読みこまれた後にdocument.getElementById('result')実行するようにする

ということがあり、具体的には、まず1番目の方はhtmlをこのようにします。

html
1
2
3<!DOCTYPE html>
4<html lang="ja" dir="ltr">
5  <head>
6    <meta charset="utf-8">
7    <title>JavaScript本格入門</title>
8  </head>
9  <body>
10    現在時刻：<span id="result"></span>
11    <script type="text/javascript"  src="hello_ex.js"></script>
12      <noscript>
13        JavaScriptが利用できません。
14      </noscript>
15  </body>
16</html>
17

このように、読み込みのタイミングを変えてあげると良いでしょう。

2番目の方はjsをこのように変更します。

js
1window.onload = function(){
2  var current = new Date();
3  var result = document.getElementById('result');
4  result.textContent = current.toLocaleString();
5}

このコードonloadイベントを用いて、ページが完全に読みこまれた後に実行します。

以上です。問題が解消されたら幸いです。javascriptの独学を頑張ってください。

投稿2021/06/13 06:38

nobkz

総合スコア320

nimasu

2021/06/13 06:54

早速のご回答有難う御座います。このタイプのエラーは読み込みタイミングを変更したら解決すると書いてあったので、`<script type="text/javascript" src="hello_ex.js"></script>``現在時刻：<span id="result"></span>`をセットでHTML側のいろんな場所へ移して試行錯誤しておりましたが、この二つの順番が読み込みの順番が違っていたと言うことが分かっておらず、具体的に説明して頂きよく分かりました。`onload`での書き換えはやってみて上手くいきまして、大変有難う御座います。htmlの記述順番変更もこのあと試してみます。

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