インターネットなこと: 2015年4月アーカイブ

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

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

お客さんのところの 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時半である・・・(^^;)

このアーカイブについて

このページには、2015年4月以降に書かれたブログ記事のうちインターネットなことカテゴリに属しているものが含まれています。

前のアーカイブはインターネットなこと: 2015年2月です。

次のアーカイブはインターネットなこと: 2015年5月です。

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


月別 アーカイブ

電気ウナギ的○○ mobile ver.

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