JavaScript を組み込む時は、実行順序もしっかり意識して

・・・という初歩的な反省をしなといけないとは・・・疲れてたんだな、俺。今日はゆっくり眠るよ。

いや、昨日、つまらないことでハマってしまったもんで(^^;

お客さんのところの Web のデザインが変わったため、2年ほど前に俺の書いた JavaScript を直したんだけど、これが上手く動かない。

設定ファイルを読み込んで、そのファイルに書かれている内容にしたがって createElement して動的に画面をデザインしていくスクリプトなんだけど、その時点で 17個くらいあるうちの 1個目の設定を読み込んだところで終了してしまう。

2個目の設定を読まないのだ。

今回から、文字コードが変わったし、その辺の影響なのかなと、状況分析するのにずいぶんな時間が・・・

で、調査していると、一度だけ上手く動いたんだよね。

「おお！」と思って、それまでデバッグ用に埋め込んでいた alert 文をコメントにして実行すると、また 1個目の設定しか読まない形に逆戻り・・・(^^;;;

「ああ、alert をコメントにした時に、何か変な修正かけちゃったかな？」とまた調査・・・

いい加減嫌気がさしていた時に、

Uncaught TypeError: Cannot read property 'appendChild' of null

なエラーが出て、やっと原因がわかった。

「ああ・・・まだ HTML の読込が要素追加の場所にまで達していないのね・・・」と。

どういうことかというと、動的に生成した HTML 要素を差し込む場所がまだ読み込まれていない、存在していない状態だった。自動車を納車に行ったら、まだ車庫が完成してなくて車を置けなかった・・・みたいな（笑）

どこに生成した要素を差し込むか、

<div id="start_point">

みたいに開始場所のタグに ID で名前をつけて、JavaScript 内で

var elm = document.getElementById("start_point");
elm.appendChild(newDiv);

と、その ID の場所を指定して差し込むわけだけど、この <div id="start_point"> と書かれた部分まで HTML が読み込まれてないので、「start_point なんて無いで！？」というエラーとなってしまうわけである。

HTML の読み込みが終わる寸前、</html> の前あたりで明示的に JavaScript を実行させてやればいいだけで、</html> の直前に、

<script type="text/javascript">
//
</script>

という具合に、JavaScript の関数の実行命令を書くだけである。

以前は <head></head> 内に上記の実行命令を書いていたが何の問題もなかったことと、上手いこと 1回目の処理が終わったところでエラーも出さずに処理が中断していたため、こんな初歩的な理由になかなか辿り着かなかった。

今回、前回のデザインよりも HTML が大きくなっていることや、読み込む jQuery のプラグインが増えてることなどで、こういう状況になっちゃったんだろうなあ・・・

いやあ、疲れた。お陰で昨夜は深夜 2時すぎまでこの対応で起きていた。

今日は早く寝よう！（と思ったら、もう深夜 1時半である・・・(^^;）

コメント(0)