こんばんは、Retroidです。
今回はただの備忘録です。タイトルは「getElementByIdがnullになるときの対処法」です。
この記事の対象者
ぜんぜん医学部系の記事じゃないです。javaScriptやってて、同じような症状に悩まされた人のためになれば幸いです。
というのも、僕の探し方が下手なのか、解決策を探すのにちょっと時間がかかりまして、もしかしたら需要あるんじゃないかなーということで書きました。
早速本題
では本題に入っていきましょう。
javaScriptならお馴染みのgetElementByIdというメソッドなんですが、こんな感じで定義して使ってました
1 |
var opinion =document.getElementById("opinion_list"); |
で、問題は、getElementByIdでopinion_listというidをもつノードを取得しているはずなのに、opinionにはなんの値も格納されないって問題です(´・ω・`)
挙動がおかしかったので、console.logで調べてみたんですよ。
そしたらこーなった。
※2018年10月5日 下記コードに誤りがあったので修正しました。修正前に読んでいただいた方、すみません💧
1 |
console.log(opinion) //null |
「opinionには何も入って無い。論外。出直しな兄ちゃん。。。」って言われた気分でした(笑)
で、何が問題だったかっていうと、windowを読み込む前にgetElementByIdを実行してしまっていたのが問題でした。
window読み込みきっていない状態だったので、idとしてopinion_listを持つノードが見つからず、nullを返しなすったってわけです。
ちなみに、ノードってのは、文章をオブジェクトとして考えたときのオブジェクト自身のことと理解しております(´・ω・`)
もし「ノード」って言葉にピンと来ないひとは、「javaScript DOM」で検索してみると良いと思われます👍
解決方法
原因がわかれば対策は簡単です。
windowを読み込んだあとに処理を実行しなされ、とプログラムに書いてやれば良い。
つまりこんなふうに関数の命令文の中に処理を取り込んでしまえばよいって訳です。
1 |
window.onload = function(){var opinion =document.getElementById("opinion_list")}; |
具体的に言うと、「windowをloadしたら、この関数を実行しなさい」という関数のコード部分にgetElementByIdを入れ込んだのです。
いかがだったでしょうか?同じ症状に悩まされている人がいたらこれを試してみてください。
以上ですm(_ _)m
ありがと。
つまってた問題が解決できたわ。
コメントありがとうございます!
役に立ててよかったです・ω・
tableのtdにsetAttributeでID付与して、getElementByIdで取得しようとしたらnullとなり取得できませんでしたが、この方法で解決することができました。
ありがとうございます!
コメントありがとうございます!
ページ読み込みのタイミングは、初学者には難しいところですよね