人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptについて勉強中です。DOM関係で、IEとFirefoxの挙動の違いに翻弄されています。

以下のコードを書いて実行すると、IEでは「ボタン追加2」ボタンを押してできたボタンしか働きません。Firefoxでは両方とも働きます。この理由を教えてください。
Javascript:
<script type="text/javascript">
function addnode(){
//inputタグを生成
n_input = document.createElement("input");
n_input.setAttribute("type","button");
n_input.setAttribute("value","alert");
n_input.setAttribute("onclick","alrt()");

//inputタグを追加
n_form = document.getElementById("f2");
n_form.appendChild(n_input);
}

function addinnerHTML(){
//formタグのinnerHTMLを書き換え
n2_form = document.getElementById("f2");
n2_form.innerHTML =
'<input type="button" value="alert2" onclick="alrt()">';
}
function alrt(){
alert("Hello world.");
}

</script>

HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JStest</title>
</head>
<body>
<form>
<input type="button" value="ボタン追加" onclick="addnode()">
<input type="button" value="ボタン追加2" onclick="addinnerHTML()">

</form>
<div>
<form id="f2">
</form>
</div>
</body>
</html>

●質問者: shujisi
●カテゴリ:インターネット ウェブ制作
✍キーワード:DOM firefox Hello world HTML IE
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●60ポイント ベストアンサー

setAttribute メソッドを使用したとき、IEでは簡単にイベントハンドラを設定できない話 - A Better Project@はてなダイアリー

にあるようにIEのsetAttributeが原因のようです。

n_input.onclick = function() {alrt()}

上のサイトを参考にelement.eventプロパティに実行したい関数を代入する方法をとりました。



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>JStest</title>

<script type="text/javascript">
function addnode(){
//inputタグを生成
n_input = document.createElement("input");
n_input.setAttribute("type","button");
n_input.setAttribute("value","alert");
n_input.onclick = function() {alrt()}

//inputタグを追加
n_form = document.getElementById("f2");
n_form.appendChild(n_input);
}

function addinnerHTML(){
//formタグのinnerHTMLを書き換え
n2_form = document.getElementById("f2");
n2_form.innerHTML =
'<input type="button" value="alert2" onclick="alrt()">';
}
function alrt(){
alert("Hello world.");
}

</script>

</head>
<body>
<form>
<input type="button" value="ボタン追加" onclick="addnode()">
<input type="button" value="ボタン追加2" onclick="addinnerHTML()">

</form>
<div>
<form id="f2">
</form>
</div>
</body>
</html>
◎質問者からの返答

どうもありがとうございます。ずっと前からあるIEの不具合(仕様?)なんですね。

とても勉強になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ