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">
//<!--
startProcess();
//-->
</script>

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

以前は <head></head> 内に上記の実行命令を書いていたが何の問題もなかったことと、上手いこと 1回目の処理が終わったところでエラーも出さずに処理が中断していたため、こんな初歩的な理由になかなか辿り着かなかった。
今回、前回のデザインよりも HTML が大きくなっていることや、読み込む jQuery のプラグインが増えてることなどで、こういう状況になっちゃったんだろうなあ・・・

いやあ、疲れた。お陰で昨夜は深夜 2時すぎまでこの対応で起きていた。
今日は早く寝よう!(と思ったら、もう深夜 1時半である・・・(^^;)

トラックバック(0)

このブログ記事を参照しているブログ一覧: JavaScript を組み込む時は、実行順序もしっかり意識して

このブログ記事に対するトラックバックURL: https://blog.netandfield.com/mt/mt-tb.cgi/3388

コメントする

このブログ記事について

このページは、shinodaが2015年4月15日 01:29に書いたブログ記事です。

ひとつ前のブログ記事は「次男坊が戦車プラモにはまりつつある」です。

次のブログ記事は「ソフトウェアアップデートで Mac mini の電源が切れなくなったんだけど」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら