・・・という初歩的な反省をしなといけないとは・・・疲れてたんだな、俺。今日はゆっくり眠るよ。
いや、昨日、つまらないことでハマってしまったもんで(^^;
お客さんのところの 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">//<!--startProcess();//--></script>
という具合に、JavaScript の関数の実行命令を書くだけである。
以前は <head></head> 内に上記の実行命令を書いていたが何の問題もなかったことと、上手いこと 1回目の処理が終わったところでエラーも出さずに処理が中断していたため、こんな初歩的な理由になかなか辿り着かなかった。
今回、前回のデザインよりも HTML が大きくなっていることや、読み込む jQuery のプラグインが増えてることなどで、こういう状況になっちゃったんだろうなあ・・・
いやあ、疲れた。お陰で昨夜は深夜 2時すぎまでこの対応で起きていた。
今日は早く寝よう！（と思ったら、もう深夜 1時半である・・・(^^;）
コメントする