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>

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2009/11/09 11:38:17
  • 終了:2009/11/09 12:49:56

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922009/11/09 12:28:44

ポイント60pt

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>
id:shujisi

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

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

2009/11/09 12:48:38

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません