こんばんわ。
最近の暑い夏がアジアっぽくてテンションあがっています。

さて、最近Web関連の仕事をしています。
実は学生の頃はPHPを細々と書いており、Web系は好物だったりします。
今日もお客様に見せるためのプロトタイプを作成していました。

いつものようにfirefoxで作成して、いざIEで動かしたら

「ページでエラーが発生しました。」

ということで、今日はIE7にやられた話です・・・。

やられたソース

javascript

window.onload=function(){
  var s = document.getElementById("s");
  var len = s.elements.length;
  var obj;
  for(i = 0; i < len; i++){
    obj = s.elements[i];
    obj.setAttribute("onchange","changeFunction();")
  }
  }
function changeFunction(){
  alert("値変わったよ！");
}

html

<form id="f" name="f" action="hoge" method="post">
<!-- 省略 -->
<div id="s">
 <input type="text" name="t1" id="t1" value="hoge" />
 <input type="text" name="t2" id="t2" value="hoge" />
 <select name="s1" id="s1">
  <option name="o1" id="o1" value="hoge1" label="hoge1" />
  <option name="o2" id="o2" value="hoge2" label="hoge2" />
 </select>
</div>
<!-- 省略 -->
</form>

まぁ、フォームの特定部分の変更を検知して、処理をするというありがちなヤツです。
jQueryで

$('f').FormObserve();

とかやればよかったのですが、プロトタイプとして1ページだけ作ればいいのでライブラリ取ってくるのが面倒・・ということでそのまま書いちゃいました。

やられたその1

div要素のelementsってダメみたいです。以下のように、formのDOMオブジェクトのelementsとすることで取得できました。

window.onload=function(){
  var s = document.getElementById("f");
  var len = s.elements.length;

firefoxでは取得できていたのですが、javascriptの仕様はどうなってるのでしょうか。
どなたか教えて頂けると有難いです。

やられたその2

こっちは完全にIEにやられました。

obj.setAttribute("onchange","changeFunction();")

ここを、こうしないといけないようです。

obj.setAttribute("onchange",new Function("changeFunction();"))

後から気づいたのですが、setAttributeは使わずに以下のように書いたほうが良さそうですね。

obj.onchange = "changeFunction";

//関数は変数に代入しておく
var changeFunction = function(){
  alert("値変わったよ！");
}

久しぶりにjavascriptを書いたのであまり自信はないのですが、参考になれば。
会社から帰って記憶だけで書いているので、syntax errorあるかもしれませんがご容赦を。
間違いの指摘やツッコミは随時お待ちしております。

コーディングに没頭できる時間も悪くないね。