innerHTMLが動作しません

前提・実現したいこと

innerHTMLを使ってlocalStorageから読み込んだ変数の値によって表示するテキストメッセージを
変更し表示する、という機能を実装しようとしています。

流れ
1 test3.htmlファイルでbibiriという変数をlocalStorage内に
保存する。使用しているjavascriptファイルはtest2.js

2 次にtest2-2.htmlファイルで先ほど保存した変数bibiriを
読み込む。ここからはtest2-2.jsファイルを使用

　　　　　　　　　　↓ここからが問題です

3 test2-2.jsファイルで読み込んだbibiri変数の値によって
test2-2.htmlファイルで表示するテキストをif文で変更する

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

１、Cannot set property 'innerHTML' of　test2-2.js:5 null
と出てきてhtmlファイル内に文字が表示されない

２　localStorage内に値が保存されtest2-2.jsで使用できてるのは
alartで確認済みのためinnerHTMLだけが問題

該当のソースコード

JavaScript
1//test2-2.js
2var data=localStorage.getItem("key");
3alert(data);
4var text1=document.getElementById("text");
5window.onload=function(){
6  text1.innerHTML="0";
7  if(data<10&&data>=0){
8    text1.innerHTML="A";
9  }else if(data<20&&data>=10){
10    text1.innerHTML="B";
11  }else if(data<30&&data>=20){
12    text1.innerHTML="C";
13  }else if(data<40&&data>=30){
14    text1.InnerHTML="D";
15  }else if(data>=40){
16    text1.innerHTML="E";
17  }
18}

Javascript
1<!--test2-2.html-->
2<!DOCTYPE>
3<html>
4<head>
5 <title>これが出たら成功</title>
6 <script type="text/javascript" src="test2-2.js"></script>
7 <meta charset="utf-8">
8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
9 <style>
10 #text{
11   font-size:100px;
12   color:red;
13 }
14 body{
15   background-color:black;
16 }
17 p{
18   color:white;
19 }
20 </style>
21</head>
22<body>
23 <p>貴方のビビり度は</p><div id="text" title="123"></div><p>です！</p>
24</body>
25</html>

試したこと

test2-2.jsで文字表示する際の方法でtextContentは使用してみたが動かなかった

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

ここにより詳細な情報を記載してください。

退会済みユーザー

2018/08/05 02:01

var text1=document.getElementById("text"); この部分の要素は取得できていますか？ここが空だとinnerHTMLがerrorになることがあります。

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

回答2件

ベストアンサー

下記部分をonloadの中に入れてください。

js
1var text1=document.getElementById("text");

【document.getElementById - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

もし与えられた ID を持つ要素がなければ、この関数は null を返します。

投稿2018/08/05 02:03

kei344

総合スコア69400

zenobread_1997

2018/08/05 02:30

ありがとうございます！おかげさまで動きました。 onload時にtext1が定義されていなかったから動かなかったんでしょうか？

kei344

2018/08/05 02:37

HTMLは上から順に評価実行されるので、script要素より後の要素はまだ準備されていない状態になります。あと、イベントは addEventListener で設定し、DOMContentLoaded 等も調べてみてください。【EventTarget.addEventListener() - Web API インターフェイス | MDN】 https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener 【DOMContentLoaded - Web 技術のリファレンス | MDN】 https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded

zenobread_1997

2018/08/05 02:51

addEventListenerは終了時のremoveEventListenerがうまく動かなくてまだ勉強中です送ってくださったページ見て勉強しておきます！

kei344

2018/08/05 02:54

終了時？【JavaScriptやjQueryでイベントを削除して再登録する方法】 https://qiita.com/zaru/items/878b892e4debf03785e3#addeventlistener%E3%82%92%E7%9B%B4%E6%8E%A5%E4%BD%BF%E3%81%86

zenobread_1997

2018/08/05 03:00

送って下さったページだと最後の方ですね自分が参考にしたのはこのサイトの別の質問者が質問されたページです addEventListenerで追加したeventをremoveEventListenerで削除したいができないっていう感じです https://teratail.com/questions/47620

kei344

2018/08/05 06:39

もし調べてわからなければ、あらためて新規の質問をしてみてください。がんばってください！

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