部下からヘルプがあったので、JavaScriptをGoogle Chromeのデバッガを使ってデバッグしました。
photo credit: nyuhuhuu via photopin cc
困っていた内容
選択肢がAとBの2個があり、選択肢Aにより選択肢Bで選択できる内容が切り替わる仕組みがあります。
選択肢Aを選んで、選択肢Bを選んでも、選択肢Bが選べないという内容でした。
Google Chromeでデバッグ
Google ChromeのデバッガをF12を押して起動して、Sourcesタブを選びます。
JavaScriptが記述されたファイルを選んで、選択肢Aと選択肢Bの変更イベント処理部分にブレークポイントを設定します。
選択肢Aを変更するイベントを発生させて処理を確認しましたが、おかしそうなところはありませんでした。
続いて選択肢Bを変更するイベントを発生させて処理を確認したところ、選択肢Aを変更する処理を呼び出していました。
選択肢Bは、選択肢Aで選ばれた値により選択肢Bで選択できる内容が切り替わる仕組みで、切り替わったときは初期値になります。
そのため、変更のイベントが起きているのに、結局は選択されていない状態になっていました。
対処方法
なぜそのような作りにしたのか聞いてみたら、確認画面から入力画面に戻ったときに、選択肢を設定したいためだそうです。
確認画面から入力画面に戻ったときに、window.onloadの中で、それぞれの選択肢を設定すれば、目的を果たせるのではないのかな？とアドバイスをしました。
すぐにデバッガを使ってしまうのは、悪い癖だと思っていますが、わかりにくい現象のときは、どうしても頼ってしまいます。
