javascript未解決問題（１）

プログラム

大したネタじゃないけど、今困ってることを書く。何の役に立つかは知らん。

ダーティーフラグ的な実装をしたいんです。
ダーティーフラグつうのは、ＭＳメモ帳なんかを開いて、「hoge」とでも入力した後おもむろにALT+F4を押すと「保存してないけど閉じていいかい？」って聞かれるアレのことです。白紙の場合は聞かれない。セーブした後も聞かれない。要は、起動時orファイル読み込み直後はフラグがオフになってて、何か文字を入力するなりするとフラグが立つ。セーブしたらフラグがオフになる。そんな感じで、バツボタン押下するなりする時にフラグが立ってたら「閉じていい？」って聞く寸法です。こう云うのをダーティーフラグとか云います（一般的な用語…だよな？）。

で、仕事でやってるHTML+javascriptな画面でもそれをやりたいわけなんすよ。

  <html>
  <body>
    <form name="fooform">
      <select name="hoge"></select>
      <select name="huga"></select>
      <select name="piyo"></select>
    </form>
  </body>
  </html>

こんな画面があったとして、３つのプルダウンのうちどれかを変更したらフラグを立てる、そんな感じ。素直に考えると、プルダウンのonChangeイベントのところにフラグを立てる処理を入れればよさそうです。他に方法あったら教えてください。

  <html>
  <script language="javascript">
    var Flag = 0;
    function FlagOn()
    {
      Flag = 1;
    }
  </script>
  <body>
    <form name="fooform">
      <select name="hoge" onChange="FlagOn();"></select>
      <select name="huga" onChange="FlagOn();"></select>
      <select name="piyo" onChange="FlagOn();"></select>
    </form>
  </body>
  </html>

こう云うソースを書くひととはお友達になりたくありません。私は３つ以上ものを覚えられないので、関数の入れ損ないミスを起こすことは火を見るより明らかだからです。自動処理はコンピュータにやらせましょう。

  <html>
  <script language="javascript">
    var Flag = 0;
    
    function Init()
    {
      var ObjArray = fooform.getElementsByTagName("select");
      for( var idx in ObjArray )
      {
        ObjArray[idx].onchange = FlagOn;
      }
    }

    function FlagOn()
    {
      Flag = 1;
    }
  </script>
  <body onLoad="Init();">
    <form name="fooform">
      <select name="hoge"></select>
      <select name="huga"></select>
      <select name="piyo"></select>
    </form>
  </body>
  </html>

Init()を追加して、そのなかで画面中のselectのElementを抽出して、その全てのonChangeイベントにフラグを立てる関数を入れました。これで、画面にプルダウンが増えたり減ったりしても大丈夫、漏れなく処理できます。

…しかし、ここに大きな落とし穴があったことをこの時は知る由もなかったのでした。。。（大したことじゃないけど）