イベントハンドラメソッドに関して教えてください

質問

お世話になります。イベントハンドラメソッドについて教えてください。

-----JS-----
function f() { window.alert("Click"); } ---(1)

document.myform.mybtn2 = function(){ ---(2)
window.alert("Click"); }

-----HTML-----
<form id="myform" name="myform">
<input type="button" id="mybtn1" name="mybtn1" value="Click" onclick="f()" /> ---(1)

<input type="button" id="mybtn2" name="mybtn2" value="Click" /> ---(2)
</form>

Q:上記のコードで(1)の場合だと正常にalert画面が出ますが、(2)の場合だと何も起こりません。
FirefoxのJavaScriptコンソールで調べると下記のエラーが表示されます。
documnet.myform has no propaties

なぜエラーが発生するのか分からずに困っています。
解決の手がかりでもよいので教えてください。

回答No.1

yambejp · ベストアンサー

(2)を実行する時点で、mybtn2がまだhtmlに書かれて
いなから。それとonclickに指定するんですよね？
そういう場合はonloadで呼び出すというてもあるので
検討ください。

//JS
function f() { window.alert("Click"); }
window.onload=function(){
document.myform.mybtn2.onclick = function(){window.alert("Click"); }
}

お礼

ご回答ありがとうございます。
お礼が遅くなり申し訳ありません

詳しい説明ありがとうございます。
onloadで呼び出す方法により当初の目的を達成できました。

Javascriptを勉強し始めて日が浅くまだまだ思い通りに行きませんが,今回の質問により一歩前進できました。
ありがとうございます。

回答No.2

VCAT

JavaScriptコードをHTMLの後にもってくればよいだけです。
プロパティにイベントが設定されていないので、このままで
はアラートは出ません。

お礼

ご回答ありがとうございます。
お礼が遅くなり申し訳ありません。

基礎的な質問にお答えいただきありがとうございました。行き詰っていましたが前進できそうです。

ありがとうございました。