window.onloadでのfunction
- javascript初心者がwindow.onloadでfunctionを使用する際に発生する問題について質問しています。
- ページ上のボタンがクリックされた時に処理を実行するための方法について解決策を求めています。
- functionの引数とwindow.onloadの関係性について理解が不足しているため、質問をしています。
- ベストアンサー
window.onloadでのfunction
javascript初心者で質問自身が僕が解決したい問題の原因かどうかも解らずに質問しています。 <script type="text/javascript"> <!-- function hoge_1() { ~処理1~ } function hoge_2(hiki_suu) { ~処理2~ } window.onload = function() { document.getElementById("button_1").onclock = hoge_1; document.getElementById("button_2").onclock = hoge_2("watasu"); } // --> </script> 上記のようにページheadにscriptを配置したとします。ページ上のbutton_1がクリックされると処理1が実行されるのですが、hoge_2のように引数を使ってしまうと、onload時に処理2を実行してしまい、button_2は有効に動作しません。 functionの引数の問題なのか、window.onloadの作法なのか、なにが悪いのか全く解らず質問しています。 ご指導のほどよろしくお願いいたします。
- hige_mario
- お礼率72% (24/33)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
根本的な話として、イベントリスナ(イベントハンドラ)というのは「第一引数にイベントオブジェクトをとる関数」なのです。これはこういう定義ですので、何だかんだ言っても始まりません。 function onLoad (e /*イベントオブジェクト*/) { ; } であれば、そもそも「イベントハンドラに引数を渡したい」という要望自体が成り立たないことにお気付きでしょう。引数を渡したい関数があるなら、イベントハンドラの中で呼び出すのです。 function onLoad (e) { hoge_2("watasu"); } addEventListener("load", onLoad, false); window.onload でも同様ですが、この古いイベントプロパティを使うのは最後の手段にして下さい。 --- ついでに、click はバブリングしますので、いちいち load を待って個々の要素にハンドラを取り付ける必要などありません。 document.addEventListener("click", function (e) { var t = e.target; var c; for (c = t; c; c = c.parentNode) { switch (c.id) { case 'button_1' : return hoge_1(); case 'button_2' : return hoge_2("watasu"); } } }, false); これだけで十分です。IE8 以下なら addEventListener の代わりに attachEvent、e.target の代わりに e.srcElement でも使って下さい。 イベント周りは、知らなければどうしようもないことが多いので、試行錯誤する前に仕様・解説書を一通り眺めた方が良いです。
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
onload時に実行したい内容は、「各ボタンに関数を代入する」ことと思われますが、button_2の箇所では代入ではなく関数の実行がなされています。onloadの作法云々は関係ありませんね。基本的なことで、hoge_2は変数扱いですが、hoge_2()と書くと実行扱いになってしまいます。 もちろん、hoge_2()という書き方にしているのは、「引数があるから」というのがすごく分かります。 たとえばこの場合の解決策として、No.3さんのように、エレメントに直接書く方法が一番手っ取り早いです。 ただし、htmlとjsを分離して効率を上げるという意味では、htmlに直接書くことになるため、最善の方法ではないかもしれませんね。 次に、関数を使いまわさなくてもよい(引数の必要ない形)のであれば、以下のように直接関数定義することができます。 window.onload = function() { document.getElementById("button_1").onclick = function(){ 処理1 }; document.getElementById("button_2").onclick = function(){ var hiki_suu = "watasu"; 処理2 } } もちろん、処理2で引数を与えているぐらいですから、上記の例は現実的でない解決策です。 上記の例は、引数を固定できる場合の例です。 では、引数を与えつつ、buttonに関数を定義するにはどうすればいいか。 そこで、必要になってくるのがNo.1さんの回答です。 いってみれば、私の回答はNo.1さんの補足です。
お礼
大変参考になりました。ありがとうございます。
- pasocom
- ベストアンサー率41% (3584/8637)
質問者様がやりたいことが「ページ上のbutton_1がクリックされると処理1が実行され、button_2がクリックされると処理2が実行される。」 と言うことで良ければ、下のように書いた方がよいのでは・・・?。 <form> <input type="button" value="button_1" onClick="hoge_1()"> </form> <form> <input type="button" value="button_2" onClick="hoge_2("watasu)"> </form>
- Chaire
- ベストアンサー率60% (79/130)
訂正。hoge_2("watasu")はclickの方でした。 function onClick (e) { hoge_2("watasu"); } document.getElementById("button_2").addEventListener("click", onClick, false); しかし、個々の要素にいちいちイベントリスナを取り付けるべきでないことは繰り返し主張いたします。innerHTML などの書き換えであっさり消滅してしまいます。
関連するQ&A
- <body onload=""> と window.onload
JavaScriptのonload処理についての質問です。 現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。 (こんな感じで記述 <body onload="hoge();hogehoge();"> hogehoge()がたまに呼ばれないことがある・・・) これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」 という話を聞きました。 (こんな感じで記述 <script> window.onload = function(){ hoge();hogehoge(); } </script> ) 「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」 なんてことがあるのでしょうか? 「2つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用 バージョンは IE → 6.0 JavaScript → 1.1 です。
- 締切済み
- JavaScript
- window.onLoad について
<body> タグに、onload=関数名・・・ と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは? と思い、 </body>の直前に <script type="text/javascript"> 関数名 ← onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか? 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故 window.onLoad=function(){ 関数名 } ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。(WindowsIE6で検証してます) http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- JavaScript
- <body>にwindow.onload = functionを2つ設定すると、最後に書いたイベントだけが実行されてしまいます。
<body>タグにonloadイベントを実行させる2つの外部jsを<head>内に設置し実行すると、 最後に記述したイベントだけが反映されてしまいます。 http://blog.webcreativepark.net/2008/02/26-185844.html を参考にいろいろといじってはみたのですが、 function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } js初心者でして、上の関数の中にどのように記述をすれば良いのかわかりません。 IE6・IE7・safariで動作させるには、実際にどのようなソースを書けばいいのでしょうか。 どなたかご教授いただけますでしょうか。 <head>内の外部jsは、以下のように記述しました。 <script src="/A.js" type="text/javascript"></script> <script src="/B.js" type="text/javascript"></script> </head> 外部jsのソースは以下になります。 //A.js window.onload = function() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js window.onload = function() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } 以上になります。宜しくお願い致します。
- ベストアンサー
- JavaScript
- window.onloadのコマンドについて
下記のソースにあるリセットボタンをクリックした時に、 フォーム内のデータを消去すると共に、window.onloadコマンドを 実行させるようにしたいと考えています。 どのように制御すればよいのか、ご教授頂ければ幸いです。 よろしくお願い致します。 ソース: ---------------------------------------------------------- <script> <!--オンロードさせ、リロード時に選択を保持--> window.onload = loadform; function loadform (){ entryChange01(); entryChange02(); entryChange03(); entryChange04(); } <!--フォームの表示/非表示の制御1--> function entryChange01(){ radio = document.getElementsByName('radio01') if(radio[0].checked) { document.getElementById('table2').style.display = "none"; document.getElementById('table3').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table2').style.display = ""; document.getElementById('table3').style.display = ""; } } <!--フォームの表示/非表示の制御2--> function entryChange02(){ radio = document.getElementsByName('radio02') if(radio[0].checked) { document.getElementById('table5').style.display = "none"; document.getElementById('table6').style.display = "none"; }else if(radio[1].checked) { document.getElementById('table5').style.display = ""; document.getElementById('table6').style.display = ""; } } } </script> <input type="reset" value="リセット" onclick="return confirm('本当に入力内容を削除してもよろしいですか?');" />
- 締切済み
- JavaScript
- window.onload=の関数呼出で()が不要
window.onload=の関数呼び出しで()が不要なのはどうしてでしょうか? ・windowオブジェクトのonloadイベントハンドラだから? ・例えば、imageオブジェクトだったらどうなるでしょうか? hoge = new Image(); hogeに対して何か処理; hoge.onload = kansu; or hoge.onload = kansu(); http://www5e.biglobe.ne.jp/~purest/javascript/zakki/onload.html
- ベストアンサー
- JavaScript
- window.onloadを複数実行したいのです
こんにちは。 最近、サーバーを借りてホームページを作りはじめた初心者なのですが、どなかた教えて下さいm(_ _)m ↓formでselectを使ったプルダウンメニューを設置しました。 <select id="area" name="area" onchange="changeA();"> <option value="1">海</ottion> <option value="2">山</option> </select> このプルダウンメニューを触ると、Javascriptの制御で、海の項目が選択されると海関連の情報が表示され、山の項目が選択されると山関連の情報が表示されるページを作りました。 ↓Javascriptソース function changeA(){ if(document.getElementById('area')){ id = document.getElementById('area').value; if(id == '1'){ document.getElementById('sea1').style.display = ""; document.getElementById('sea2').style.display = ""; document.getElementById('mnt1').style.display = "none"; document.getElementById('mnt2').style.display = "none"; }else if(id == '2'){ document.getElementById('sea1').style.display = "none"; document.getElementById('sea2').style.display = "none"; document.getElementById('mnt1').style.display = ""; document.getElementById('mnt2').style.display = ""; } } } window.onload = changeA; という感じです。 このような制御のプルダウンメニューを同じページにもうひとつ配置したところ、ページをブラウザの更新ボタンで更新したりすると、関係ない項目などが表示されるようになってしまいました。 原因を調べるために検索をしてみたところ、window.onloadを2つ実行させるには特別なことが必要とのことでしたが、どうすればよいのかが全然わかりません。 どなたか教えてくれないでしょうか? お願いします。
- 締切済み
- JavaScript
- イベントハンドラに処理を追加するには?
例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか? 例) ・rei.htm <html> <script language="JavaScript" type="text/javascript"> function hoge(){ alert("hogeです"); } function foo(){ alert("fooです"); } </script> <body onload="hoge();"> </body> <script language="JavaScript" type="text/javascript"> document.body.onload += foo(); </script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな?」と思って上記のようにやってみたのですがうまくいきませんでした。 (結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥) また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行 ↓ ・javascriptエラー ↓ ・hoge()の実行 となりました。(これもなぜこうなるのかよくわかりせん) 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。
- ベストアンサー
- JavaScript
- window.onloadが、ブラウザ(Firefox)で戻る場合に動作しない
「Flash版地図API」の導入作業をしています。 地図内にマーカーを付けるために、以下のように記述しました。 <script language="JavaScript" type="text/javascript"> <!--常にマーク表示--> window.onload = function() { thisMovie('YFMap').addIcon('tokyo', '35.60714835619635', '139.3955620148672', '<a href="/">東京'</a>, 'L1'); } </script> window.onload は、ブラウザを開くたびに実行されると思います。 IEでは、問題ないのですが、Firefoxの場合、表示されたマークをクリックして次のページへ移動して、その後、ブラウザで戻ってくると、マークが表示されないのです。 どうやら、Firefoxの場合、「window.onload」は、ブラウザから戻ってきた場合は動作していないのでは?と想像しています。 この場合、どのように記述するのが良いのでしょうか?ご指導宜しくお願い致します。 ※ javascriptの知識はほとんどありませんので、具体的なソースで教えて頂きたいです。
- 締切済み
- JavaScript
- onloadがうまくいかない
onloadを使って、 下記HPのtoggleエフェクトのJSが適用されたボタンを押したいのですがうまくいきません。 http://demos.mootools.net/Fx.Slide 現在作成コードの一部は、 ヘッダー部から、 <script type="text/javascript"> window.addEvent('domready', function(){ //-vertical var mySlide = new Fx.Slide('test'); $('toggle').addEvent('click', function(e){ e = new Event(e); mySlide.toggle(); e.stop(); }); }); </script> <body onload="document.getElementById('help').click()"> <input type="button" id="help" name="toggle" value="ヘルプを表示"> <div id="test"> ヘルプ内容 </div> </body> みたいな感じで、 他にもログアウトボタンやらあるんですが、 それらのボタンは上記onloadの方法で起動できます。 なぜかJSが適用されてるボタンだけ出来ないような感じなのですが、 何か解決策はありますでしょうか?
- ベストアンサー
- JavaScript
お礼
document.addEventListenerの部分を利用したところ、期待した結果を得られました。 そもそもイベントリスナが理解できてなく、勉強してみたいと思います。 ありがとうございました。