- ベストアンサー
効率良くイベントに引数を渡すやり方
sample2に引数「x」「y」を渡したいが為に 次のように何段階も同じような作業をしなくてはならない方法しか 自分は思いつかないのですが、何かもっと効率的な方法はあるのでしょうか？ function main() { var element = document.createElement('div'); element.x = x; element.y = y; element.onclick = function(){ sample1(this.x, this.y); }; } function sample1(x, y) { var element = document.createElement('span'); element.x = x; element.y = y; element.onclick = function(){ sample2(this.x, this.y); }; } function sample2(x, y) { alert("x="x+" y="+y); }
- takagoo100
- お礼率85% (739/868)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- susie-t
- ベストアンサー率86% (37/43)
eって、イベントオブジェクトですよね？ 以下のようにすれば動作すると思います。詳しくは参考URLを参照してください。 function sample1(x, y) { var element = document.createElement('span'); element.onclick = function(e){ sample2((e||window.event), x, y); }; }
お礼
ご返答ありがとうございます。 そのやり方でできました。ありがとうございます。
- steel_gray
- ベストアンサー率66% (1052/1578)
どうもやりたい事がわからないのいですが、こういう事？ <html> <head> <title></title> </head> <script type="text/javascript"> function main() { main.x = 111; main.y = 222; } function sample2() { if(main.x){ alert("x="+main.x+" y="+main.y); } else { alert('mainが実行されていません') } } </script> <body> <input type="button" value="main実行" onclick="main()"> <input type="button" value="sample2実行" onclick="sample2()"> </body> </html>
お礼
ご返答ありがとうございます。 ある程度具体的な例だとこのような感じになります。 表のようなものを作って（ここでは３×３）、 そのクリックされたマスが後の関数で必要になるので どうにかして伝えられないかと考えています。 ついでにクリックしたときに現れるメニューの表示させる位置も 設定したいので、クリックされたマウスの位置も取得したいです。 こういう一連の仕組みを、うまいぐあいにクラスかなにかで纏められないかと 考えているのですが、それ自体をあまり理解してないのでお手上げという状況です・・・ function main(x, y) { for(var y = 1; y <= 3; y++){ for(var x = 1; x <= 3; x++){ var Element = document.createElement("td"); Element.x = x; Element.y = y; Element.onclick = function(){ menu(this.x, this.y); } document.body.appendChild(Element); } } } function menu(x, y) { var textNode = document.createTextNode("メニュー"); var element = document.createElement('span'); ←これを表示させる位置が欲しいのでeが必要 var mouseX = e.clientX; var mouseY = e.clientY; element.style.left = mouseX; element.style.left = mouseY; element.onclick = function(){ do_something(x, y); }; element.appendChild(textNode); } function do_something(x, y) { alert("x="x+" y="+y);←main関数に記述してあるx、yがここ（この関数）で必要になる
- susie-t
- ベストアンサー率86% (37/43)
コードからやりたいことがいまいち見えてこないのですが、 たぶん以下でもOKだと思います。 ------------------------------------- function main() { var element = document.createElement('div'); //x,yの定義と設定 element.onclick = function(){ sample1(x, y); }; } function sample1(x, y) { var element = document.createElement('span'); element.onclick = function(){ sample2(x, y); }; } function sample2(x, y) { alert("x="+x+" y="+y); } ------------------------------------- ちょっと不思議な感じがするかもしれませんが、 クロージャのレキシカルスコープの特性から、これでOKです。
お礼
ご返答ありがとうございます。 すいません、コードに関しては本来はもっと複雑（滅茶苦茶）で 例にするために簡潔にしたつもりでしたが、逆に意味分からないものになってしまいました・・・ susie-tさんのやり方でできるのは確認しました。 後付けで申し訳ないのですが、マウス座標取得とかで必要になる「e」を 使いたいと思い、それも引数に付加したのですが、 それが1つ目の引数だとすると、2つ目3つ目のx,yの引数が合わなくなるのです・・・ この場合はどのようなやり方で解決できるのでしょうか？ function sample1(x, y) { var element = document.createElement('span'); element.onclick = function(){ sample2(x, y); }; ← これをfunction(){ sample2(e, x, y); };こうするとエラーが出てしまう } function sample2(e, x, y) { var mouseX = e.clientX; var mouseY = e.clientY; alert("x="+x+" y="+y);←yがundefinedになる }
上位スコープに変数を作成する のが早いと思う。
お礼
ご返答ありがとうございます。 あまり理解できないのですが、具体的にどのような感じになるのでしょうか？ main() の中にある「x」「y」は、予め決まった値ではなく、 実行時にmain()の中だけで決まるような値です。 その場合でもそのやり方でできるのでしょうか？
関連するQ&A
- 引数付きでイベントをセットしたい
下のようにして引数を付けてイベントをセットしようとしたのですが、 どうも動作がうまくいってないようなのです。引数なし＞Obj.onclick = check; ならちゃんと動作しました。どうすれば引数付きでセットできるのでしょうか？ function check(text) { alert(text); } function sample() Obj = document.getElementById("sample"); Obj.onclick = check("メッセージ");
- ベストアンサー
- JavaScript
- 引数のある関数をhtml読み込み後に実行
次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。 body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？ [html] <div id="here"></div> [JavaScript] function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); [result] <div id="here"> <span> <p>content</p> </span> </div> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- イベントに適切な値が伝わらない
0から9までidをもつdivを用意して、それぞれクリックしたら そのidを表示したいのですが、なぜかどれをクリックしても 表示されるのは「10」でした。以下のやり方では何がいけないのでしょうか？ function sample(){ for(i=0; i<10; i++){ var obj = document.getElementById(i); obj.onclick = function(){ sample_alert(i); }; } } function sample_alert(i){ alert("i="+i); } window.onload = function() { sample(); } for($i=0; $i<10; $i++){ print "<div id=\"{$i}\">{$i}</div><br>\n"; }
- ベストアンサー
- JavaScript
- ownerDocumentの使い方を知りたいです。
javascriptの.ownerDocumentの使い方を知りたいです。 https://developer.mozilla.org/ja/DOM/element.ownerDocument のサイトを参考に実際にいろいろ試してみました。 ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test1() { var a = 123; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test1()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test2() { var a = this.ownerDocument; document.write(a); } </script> <div> <span onclick="test2()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test3() { var a = this; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test3()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー 全てundefinedとなり、そのまま固まってしまいます。 .ownerDocumentはどのように使うのでしょうか。 アドバイスをよろしくお願いします。
- ベストアンサー
- JavaScript
- for in と 接続演算子について
<!-- function check(){ var flag = 0; if(document.registform.user.value==""){ flag = 1; var error1 = document.getElementById("error1"); if(error1 == null){ var element1=document.createElement("div"); element1.innerHTML='<span class="error0" id="error1">ユーザー名を入力してください。</span>'; var ojbody1=document.getElementById("td_error1"); ojbody1.appendChild(element1); } } if(document.registform.pass.value==""){ flag = 1; var error2 = document.getElementById("error2"); if(error2 == null){ var element2=document.createElement("div"); element2.innerHTML='<span class="error0" id="error2">パスワードを入力してください。</span>'; var ojbody2=document.getElementById("td_error2"); ojbody2.appendChild(element2); } } if(document.registform.pass2.value==""){ flag = 1; var error3 = document.getElementById("error3"); if(error3 == null){ var element3=document.createElement("div"); element3.innerHTML='<span class="error0" id="error3">パスワード(確認)を入力してください。</span>'; var ojbody3=document.getElementById("td_error3"); ojbody3.appendChild(element3); } } if(flag == 0){ return true; }else{ return false; } } //--> javascript初心者です。 この処理をfor(key in array)を使って簡単にできるかも... と思ったんですが接続演算子の使い方がよくわかりません。 プログラム自体初心者独学で手探りでやっているため考え方が間違っている場合などありましたらアドバイス等もいただけたらうれしいです。 if(document.registform.user(☆).value==""){ flag = 1; var error1(☆) = document.getElementById("error1(☆)"); if(error1(☆) == null){ var element1(☆)=document.createElement("div"); element1(☆).innerHTML='<span class="error0" id="error1(☆)">ユーザー名(☆)を入力してください。</span>'; var ojbody1(☆)=document.getElementById("td_error1(☆)"); ojbody1.appendChild(element1(☆)); }} (☆)のところが接続演算子が使えればと思いました。 例えばvar element + key でelement1の変数というのは無理なのでしょうか？ もし可能ならgetElementById("error + key ")はどういった書き方をすればよいでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- 要素を追加する関数の作成
<div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。
- ベストアンサー
- JavaScript
- 動的にonclickを割当ながら、引数を正しく渡す方法を教えてください。
皆様のお知恵を拝借させてください。 以下のように、HTML上の<div id="contents">の子になっている <div>のa～cに、動的にonclickの動作を割り当てようとしています。 Javascriptの独自関数abcの引数として、"contents"を渡すことにより、 その子となっている<div>を取得し、 それぞれについて、 「A～Cをクリックすると、それに該当するdivのidを表示する」 という内容になっています。 私の期待としては、 Aをクリックするとa Bをクリックするとb Cをクリックするとc を表示させたいのですが、 どれをクリックしてもcが表示されてしまいます。 ---------------------------------------------- <div id="contents"> <div id="a">A</div> <div id="b">B</div> <div id="c">C</div> </div> <script> abc("contents"); function abc(contents){ var elm = document.getElementById(contents); var cn = elm.childNodes; for (var i = 0; i < cn.length; i++) { var oElement = cn[i]; ★ document.getElementById(oElement.id).onclick = function(){def(oElement.id);}; } } function def(id){ alert(id); } </script> ------------------------------------ 要するに、 「動的にonclickの動作を割り当てることができる」 「引数がただしく渡せる」 の2つが満たしたいのですが、上記のような方法しかわからず、 行き詰ってしまっています。 また、説明を簡略化するためにあえてdef()の中身は、 alertのみにしていますが、実際にはもう少し複雑な処理をさせています。
- ベストアンサー
- JavaScript
- メモリリークに関して
お世話になります。クロージャ使用によるメモリリークについて、 function doHoge(element) { element.onClick = function() { // do domething } } でメモリリークが起こりますが、次の場合はどうなるでしょうか。 function doHoge() { var element = document.getElementById("aa"); element.onClick = function() { // do domething } } あるサイトではdoHogeの引数のみに言及していましたが、この場合もクロージャはelementを参照するのでメモリリークが起こると思うのですが、 どうでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- WebBrowser 内のボタンをクリックし、引数を渡したい。
WebBrowser 内のボタンをクリックし、引数を渡したい。 WebBrowser コントロールを使用していて Windows アプリからページ内のボタンをクリックする方法について質問です。 以下のボタンが html で定義されているとして、 <input type = "button" id = "button1" onclick="javascript:foo();" /> HtmlElement element = null; element = webBrowser1.Document.GetElementById("button1"); element.InvokeMember("click"); こうすると、javascript の foo() が実行されます。 本題はここからなんですが、 この関数fooに引数を渡したいのです！ 例えばfooの定義を var foo=function(arg) { alert(arg); } として、アプリ側から、 element.InvokeMember("click","this is test"); のようにすれば動くかと思ったのですが、だめでした。 方法をご存知のかた、ご教授願います！
- ベストアンサー
- HTML
- jQueryのイベントに引数を渡したい
例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか？ 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false; } ); }); こういう場合はjQeuryであっても、onclick属性で関数を呼び出すのが普通なのでしょうか？ ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
お礼
ご返答ありがとうございます。 なるほど、テーブルからセル、行を得る方法があったんですか。 あと ＞// ※1 グローバルオブジェクト event を使えるようにする これは便利ですね。