• ベストアンサー

効率良くイベントに引数を渡すやり方

steel_grayの回答

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

どうもやりたい事がわからないのいですが、こういう事? <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>

takagoo100
質問者

お礼

ご返答ありがとうございます。 ある程度具体的な例だとこのような感じになります。 表のようなものを作って(ここでは3×3)、 そのクリックされたマスが後の関数で必要になるので どうにかして伝えられないかと考えています。 ついでにクリックしたときに現れるメニューの表示させる位置も 設定したいので、クリックされたマウスの位置も取得したいです。 こういう一連の仕組みを、うまいぐあいにクラスかなにかで纏められないかと 考えているのですが、それ自体をあまり理解してないのでお手上げという状況です・・・ 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がここ(この関数)で必要になる

関連するQ&A

  • 引数付きでイベントをセットしたい

    下のようにして引数を付けてイベントをセットしようとしたのですが、 どうも動作がうまくいってないようなのです。引数なし>Obj.onclick = check; ならちゃんと動作しました。どうすれば引数付きでセットできるのでしょうか? function check(text) { alert(text); } function sample() Obj = document.getElementById("sample"); Obj.onclick = check("メッセージ");

  • 引数のある関数を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> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。

  • イベントに適切な値が伝わらない

    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"; }

  • 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はどのように使うのでしょうか。 アドバイスをよろしくお願いします。

  • 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 ")はどういった書き方をすればよいでしょうか? よろしくお願いします。

  • 要素を追加する関数の作成

    <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' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。

  • 動的に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のみにしていますが、実際にはもう少し複雑な処理をさせています。

  • メモリリークに関して

    お世話になります。クロージャ使用によるメモリリークについて、 function doHoge(element) {  element.onClick = function() {   // do domething  } } でメモリリークが起こりますが、次の場合はどうなるでしょうか。 function doHoge() {  var element = document.getElementById("aa");  element.onClick = function() {   // do domething  } } あるサイトではdoHogeの引数のみに言及していましたが、この場合もクロージャはelementを参照するのでメモリリークが起こると思うのですが、 どうでしょうか。 よろしくお願いします。

  • 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属性で関数を呼び出すのが普通なのでしょうか? ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。