• ベストアンサー

下記コードの実行方法について質問です。

問題のコードは下記ですが、 bodyタグに onLoad="firstFunc()" と書かずに実行したいのですが、 スマートな方法はないでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body onLoad="firstFunc()"> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

いちばんさいごに <script type="text/javascript"><!-- document.getElementById('btn').onclick = function(){alert('りんご')}; //--> </script> </body> </html>

その他の回答 (2)

  • notnot
  • ベストアンサー率47% (4846/10257)
回答No.3

一般的には、 document.body.addEventListener("load",firstFunc,false); function firstFunc(){ ....... } と書きます。addEventListenerだと同じ要素の同じイベントに複数の処理が登録できます。 document.body.onload=firstfunc; だと、別の箇所でうっかり、 document.body.onload=otherfunc; と書いちゃうと上書きされ、あとで登録した方だけしか実行されません。 ただ、IEはウェブ標準じゃないので、上記はそのままでは使えません。同様のIE独自のattachEventメソッドがあるので、IEにも対応するためには、 function addevent(node, type, func) { if(node.addEventListener) { /* 一般ブラウザ用 */ node.addEventListener(type, func, false); } else { /* IE用 */ node.attachEvent("on"+type, func); } }; addevent(document.body,"load",firstFunc); function firstFunc(){ ....... }

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

window.onloadに書くのも一般的ですね。 (一部メモリリーク問題などちょっと気になりますが・・・) <script> window.onload=firstFunc; function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • イベントハンドラに設定された関数を取得し、実行するには？

    <html> 　　<body> 　　　　<script language="JavaScript" type="text/javascript"> 　　　　　　function test(){ 　　　　　　　　alert("testです") 　　　　　　} 　　　　</script> 　　　　<input id="btntest" type="button" value="test" onclick="test()"/> 　　</body> </html> このhtml文書に対し、 ・test(); ・document.getElementById("btntest").click;（ByTagName等を使用しても同じ方法とする） 上記方法以外にJavaScriptを用いて、 test()を実行するにはどうすればよいでしょうか？ var eventobj = document.getElementById("btntest").onclick; eval(eventobj); 上記みたいな形でevalをよくわからずに試してみましたがダメでした。

  • javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。

    モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button　～ onClick>とかがつかわれているとうれしいです。

  • 下記コードのようなオブジェクトとかprototypeとかを理解するヒントを教えてください！

    <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> var hoge = function(){ //▼ function testFunc(n){ } testFunc.prototype.init = function(c){ alert(c); }// end func return{ testFunc:testFunc } }(); var u = new hoge.testFunc(); u.init("あああ"); </script> </body> </html> ---------------------------------------------------- ここ数日いろいろ弄っているのですが、 いまいちピンと来ない感じです。 何か、参考になるようなスクリプトやポイントなどありましたら、 ご紹介いただけると幸いです。 よろしくお願いいたします。

  • カプセル化？について

    このようなプログラムを書いたのですが、ボタンをクリックしてもalert2が実行されません何故でしょうか！！＞＜ どうかお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <script type = 'text/javascript' charset = 'UTF-8' src = 'jslb_ajax.js'></script> <script type = 'text/javascript' charset = 'UTF-8' src = 'cookie.js'></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAsm3eIraQIktrtviyd0JlXBTcyTBaKMmwi780-Sh78Ay3Pg36mBS27UkGZUGL-mR0X2zg4ieZWlneBA" type="text/javascript"></script> </head> <script type="text/javascript"> //<![CDATA[ function onLoad(){ var map = new GMap(document.getElementById("map")); map.addControl(new GScaleControl()); map.centerAndZoom(new GPoint(139.745449, 35.658715), 12); function _alert2(){ alert("koneko"); } onLoad.prototype.alert2 = _alert2; } function koneko(){ alert("fff"); obj.alert2(); } var obj = new onLoad(); //]]> </script> <body onLoad = "onLoad()"> <div id="map" style="width: 600px; height: 600px"></div> <input type = "button" value ="botan" onclick = "koneko()"> </body> </html>

  • innerHTMLに代入したインラインフレームのＤＩＶの値の取得について

    下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>

  • javascript 初心者です

    javascript 初心者です 設定したグローバル変数を引数に指定したいのですが、うまくいきません。 下記のスクリプトのように書いてみたのですが、○が返ってきてしまいます。 どうすればうまくいくでしょうか？よろしくお願いします。 <html> <head> <script type="text/javascript"> <!-- i = false; function myFunc(hensu){ if(hensu){ alert("○"); } else{ alert("×"); } } --> </script> </head> <body> <p onclick="myFunc('i')">[btn]</p> </body> </html>

  • getElementsByNameで要素が取得できない

    久々にJavaScriptを組みました。 以下のソースコードなんですが、ボタンクリック時にalertで「1」 が表示されるはずだと思っているのですが、「0」が返ってきます。 何かおかしなところはありますでしょうか？宜しくお願いします。 <html> <head> <script language="javascript"> function test(){ var obj = document.getElementsByName("name1"); alert(obj.length); } </script> </head> <body> <div name="name1"></div> <button onclick="test();">TEST</button> </body> </html>

  • 下記ＨＴＭＬ（java?）だと，ホップアップが１つしか出来ません。

    続けざまの質問になりますがご返答宜しくお願いいたします。 ちなみに，ＨＴＭＬタグのように，target=newっていうのを入れてみたのですがどうも違うようですね。 また，この開かれた方のＨＰ（自分のＨＰじゃないので，hopup1.htmのソースは触れません），hopup1.htm を自動的に閉じてくれる方法はありませんか？ <html> <head> <script type="text/javascript"><!-- function popwin(){ pw=window.open("hopup1.html","pop","width=10, height=10, top=0, left=0"); } //--></script> </head> <body> <input type="button" value="login" href="#" onClick="popwin()"> </body> <html> <head> <script type="text/javascript"><!-- function popwin(){ pw=window.open("hopup2.html","pop","width=10, height=10, top=0, left=40","new"); } //--></script> </head> <body> <input type="button" value="login" href="#" onClick="popwin()"> </body>

    • ベストアンサー
    • HTML
  • phpソースの中のjavascripｔを実行する方法

    現在、AJAXの勉強をしているプログラミング初心者です。 環境はapache2,php5です。 phpのソースの中にjavascriptを埋め込んだものを動作させるには どうしたらよいのかが分かりません、 例えば以下の２つのファイルの場合。 abc.php↓ --------------------------------------------------------------- <html> <head></head> <body> <?php echo "こんにちわ"; ?> <script tyep="text/javascript"> alert("hello"); </script> </body> </html> --------------------------------------------------------------- abc.html↓ --------------------------------------------------------------- <html> <head> <script> try{ var obj= new ActiveXObject("Microsoft.XMLHTTP");} catch(e){var obj=new XMLHttpRequest();} function load(point){ obj.open("POST","abc.php",true); obj.send(null) obj.onreadystatechange=change; } function change(){ if(obj.readyState==4){ document.getElementById("target").innerHTML=obj.responseText; } } </script> </head> <body> <div id="target"></div> <a href="#" onclick="load();">click!</a> </body> </html> --------------------------------------------------------------- としたところ、 abc.phpを実行した場合はabc.phpのjavascriptが実行されてアラートがでるのですが、 abc.htmlからabc.phpにリクエストを出して出力された場合には、 javascriptが実行されずにアラートが出ない。 どうしてこのようになるのでしょうか？ また解決策があれば教えてください。 よろしくお願いします。

  • 複数ボタンのクリックイベント

    JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 （一番下に全ソースを貼りました。見づらくて申し訳ありません。） htmlに複数の似た名前のボタンがあります。 名前：button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。 　・0～９のイベントは正しく登録されている。 　・しかし、全てがchecked(10)を呼んでいる 質問１ 　これを回避する方法と、その対処理由を教えて頂きたくお願い致します。 　 質問２（オプション） 　参考になる資料を教えていただければ幸いです。 　例）サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。　*/ for (i=2; i<4; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する