こんばんわ。
最近の暑い夏がアジアっぽくてテンションあがっています。
さて、最近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あるかもしれませんがご容赦を。
間違いの指摘やツッコミは随時お待ちしております。
コーディングに没頭できる時間も悪くないね。