WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:DOMで追加した要素のイヴェントハンドラ

0:[投稿] dailang [2003/04/25 14:56 ][環境:IE6 なし]

JavaScriptで動的に追加した要素に、さらにイヴェントハンドラを設定して
何かをさせると言うことは不可能でしょうか。
こちらのコンテンツでDOMを学び、下のようなソースを書いたのですが、
動的に追加した要素の方のonclick='fStep()'が機能してくれないのです。

***ここからソース***
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="content-script-type" content="text/javascript">
 <script type="text/javascript">
   function fHop() {
     var vHop = document.createElement('img');
     vHop.setAttribute('src', 'something.png');
     vHop.setAttribute('width',  '100');
     vHop.setAttribute('height', '100');
     vHop.setAttribute('onclick', 'fStep()');
     vHop.style.position = 'absolute';
     vHop.style.left = Math.floor(Math.random() * 800);
     vHop.style.top  = Math.floor(Math.random() * 400);
     document.getElementsByTagName('body')[0].appendChild(vHop);
   }
   function fStep() {
     alert('Hi everybody!');
   }
 </script>
</head>
<body>
 <button onclick="fHop()">Click Me!</button>
</body>
</html>
***ここまでソース***

# (Sleipnir で閲覧し)「すべて選択」して「選択部分のソースを表示」すると、
# onclickが一応は書き込まれていました。

<BUTTON onclick=fHop()>Click Me!</BUTTON> <IMG
style="LEFT: 648px; POSITION: absolute; TOP: 112px" onclick=fStep() height=100
src="something.png" width=100>


1:[完了] dailang [2003/04/26 14:12 ]

>     vHop.onclick = fStep;
いろいろと悩んで遠回りしましたが、
イヴェントハンドラに関数を上書きしたら動きました。
ありがとうございました。_(. .)_

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World