JQueryでfunctionに引数としてIDを渡して処理する方法

2023/08/09 00:39

このQ&Aのポイント

HTMLの制御にjQueryを使用する際、IDを引数としてfunctionに渡して処理する方法について解説します。
test1Scriptと同様の結果を、IDを引数として渡すtest2Scriptでも得たい場合、失敗しない方法を探しています。
失敗(1)や失敗(2)といった書き方ではうまくいかず、代替手段をご教授いただけませんか？

ベストアンサー

JQueryでfunctionに引数としてIDを渡して処理する方法

2009/11/09 21:48

HTMLの制御にjQueryを使用しています。 functionに引数としてIDを渡して処理をしたいのですが、やりかたが分かりません。テスト的にtest1Script、test2Scriptを作成しました。 test1と同様の結果を、引数にIDを渡すtest2Scriptでも得たいのですが、失敗(1)や失敗(2)のように書いた場合、うまくいきません。何か良い方法はないでしょうか。ご教授下さい。 <script type="text/javascript"> function test1Script(){ alert($("#textfield1").val()); } function test2Script(objId){ //alert($("#objId").val()); 失敗(1) //alert($(#objId).val()); 失敗(2) } </script> </head> <body> <input type="text" id="textfield1" value="test1" /> <input type="button" id="button1" value="テスト1" onclick="test1Script();" /> <input type="button" id="button2" value="テスト2" onclick="test2Script('textfield1');" /> </body> </html>

katana0514
お礼率69% (16/23)

JavaScript
回答数1
ありがとう数4

みんなの回答 （1）
専門家の回答

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

ベストアンサー

OKbokuzyo
ベストアンサー率43% (130/296)

2009/11/10 01:17 回答No.1

回答１ function test2Script(objId){ alert($(objId).val()); } <input type="button" id="button2" value="テスト2" onclick="test2Script('#textfield1');" /> 回答２ function test2Script(objId){ alert($("#" + objId).val()); } <input type="button" id="button2" value="テスト2" onclick="test2Script('textfield1');" />

質問者

お礼 2009/11/10 09:50

ありがとうございます。回答1,回答2のやりかたで、できました。これで、やりたいことができそうです。本当に助かりました。

関連するQ&A

jQueryでの、引数を取るJS関数の呼出方法
jQueryの学習をしています。 HTML & JavaScriptで下記のように書かれているコード <input type=button id=button1 onclick=func_a() /> <script> function func1(){ //処理いろいろ } </script> は、jQueryを使って書くと、 $('#button1').live('click', func_a); このように書けます。 <input type=button id=button1 onclick=func_b(arg1, arg2) /> <script> function func_b(argument1, argument2){ //処理いろいろ } のように引数を取る関数は jQueryではどのように書けばよいのでしょうか？ $('#button1').live('click', func_b(arg1, arg2)); とは書けなかったので、今は、 if (arg1 == xxx){ $('#button1').live('click', func_b_1_1); } else { $('#button1').live('click', func_b_1_2); } などのように引数別に同じような関数を創って書いています。 DRY原則という同じコードを二度書くなという約束もあるようなので、きっといい方法があると思うのですが、お詳しい方、教えていただけるとうれしいです。どうぞ、よろしくお願いいたします。
- ベストアンサー
- JavaScript
javaで　name=id［?］　を指定する方法とは？
ショップ運営で、商品一覧から＋－ボタンでそれぞれ数の増減をさせるよう、ほかのサイトを参考にして下記のようにjavascriptで記述してみました。このうち、商品２と３はボタンが機能したのですが、商品１は数の増減ができません。おそらく要素名に（name=id[1]）と［］で囲っているからだと思うのですが、この［］を取らないまま、ボタンを機能させる方法はありますでしょうか？よろしくお願いします。 <FORM> 商品１：<INPUT type=text name=id[1] value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id[1])"> <INPUT type=button value="－" onClick="minus(this.form.id[1])"> <BR> 商品２：<INPUT type=text name=id2 value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id2)"> <INPUT type=button value="－" onClick="minus(this.form.id2)"> <BR> 商品３：<INPUT type=text name=id3 value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id3)"> <INPUT type=button value="－" onClick="minus(this.form.id3)"> </FORM> <SCRIPT language="JavaScript">  </SCRIPT>
- ベストアンサー
- JavaScript
jQuery 動的にボタンが増えた時
<html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時にどのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。
- ベストアンサー
- JavaScript
javascriptのonclickに関数を追加？
現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。色々調べたのですが、結局わからなかったので質問させていただきます。何卒、ご教授宜しくお願いします。 ■やろうとしていること下記ソースのボタンをどれかクリックしたら、新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に生成したいのですが、onclickが追加されずに困っております。どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
引数付きで呼び出す関数・配列・name(id)のつけ方・・・？
引数付きで呼び出す関数・配列・name(id)のつけ方・・・？何を質問したいのかわからないタイトルになってしまいましたがとりあえず下のソースコードを見てください(実行してください)。 <html> <head><title>up</title> <script language="JavaScript">  </script> </head> <body> <input type="button" value="1" onClick="up(0)"><div id="text1">5*****</div><br> <input type="button" value="2" onClick="up(1)"><div id="text2">5*****</div> </body> </html> １のボタンを押すと上の文字列が反応し、２のボタンを押すと下の文字列が反応するプログラムを書きたいのですが、どっちのボタンを押して関数が呼び出され、どっちの文字列に処理をするか区別することができません、どうしたらよいのでしょうか？下のようにひとつの時はできました・・・。でもふたつの時はどうしたらいいのかわかりません。 <html> <head><title>up</title> <script language="JavaScript">  </script> </head> <body> <input type="button" value="1" onClick="up()"><div id="text1">5*****</div> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptで電卓を作って一応完成はした
のですが、分からないコードがあります。以下のコードです。～HTML～ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="Ｃ" onclick="cl()"> <input type="button" value=" ７ " onclick="val(7)"> <input type="button" value=" ８ " onclick="val(8)"> <input type="button" value=" ９ " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" ４ " onclick="val(4)"> <input type="button" value=" ５ " onclick="val(5)"> <input type="button" value=" ６ " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" １ " onclick="val(1)"> <input type="button" value=" ２ " onclick="val(2)"> <input type="button" value=" ３ " onclick="val(3)"> <input type="button" value="－" onclick="keisan('-')"> <input type="button" value=" ０ " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" ＋ " onclick="keisan('+')"> <input type="button" value="＝" onclick="keisan('=')"> </form> ～JavaScript～ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか？特にonclickをボタンの数だけ書くのは手間です。
- ベストアンサー
- JavaScript
入力した文字をalertで表示するスクリプトを作っています。
入力した文字をalertで表示するスクリプトを作っています。以下、IEとOperaでは動作しますが、FirefoxとGoogle Chromeでは動作しません。書き方が悪いのでしょうか？ <html> <head> <script language=JavaScript>  </SCRIPT> </HEAD> <BODY> <input type="text" name="input1"> <input type="button" value="テスト" onClick="test()"> </html>
- ベストアンサー
- JavaScript
初心者です。Java scriptでの引数の使いかたについての質問です
初心者です。Java scriptでの引数の使いかたについての質問です初心者です。Java scriptでの引数の使いかたについての質問です。下記でやりたいことは、 requestText関数の引数02とか03を、java script なかの　httpのアドレスの中のabに記入するにはどうしたらいいかということです。あるいは、そうしたことが出来るのでしょうか。 <input type="button" value="02" onclick="requestText(02)"> <input type="button" value="03" onclick="requestText(03)"> function requestText(ab){ var ajax = new Ajax.Request("http://www.geocities.jp/abate/ab.html", {method: "GET", onSuccess: gotData}); function gotData(xmlhttp) { document.getElementById("a02").innerHTML = xmlhttp.responseText; } }
- 締切済み
- JavaScript
jspでjavascript関数へ引数を渡す方法
最近Webアプリの勉強をし始めたばかりの初心者です。今、jspでjavascript関数へ引数を渡す方法がうまくいかず困っています。以下はjspファイルの該当部分の抜粋です。やりたいこととしては、画面上で参照ボタンを押したときに、"reference"という文字列を一度javascript関数を介してサーブレットへ渡すということです。 <head> <script type="text/javascript">  </script> </head> <form action="/tomcat_test/servlet/hello" method="POST"> <input type="hidden" name="param" id="param"> <input type="button" value="参照" onclick=<%= "func('reference')" %>/> </form> いろいろ調べてみたのですが、なかなかうまくいかずに困っています。そもそも、参照ボタンを押してもonclickがうまく動いていないようで、まずその問題を解決したいです。 onclickタグの使い方を間違っているのでしょうか。よろしくお願い致します。
- ベストアンサー
- Java
jQueryでshow/hideが上手く行かない
入力フィールドとボタンを作成し、ボタンを押すたびに入力フィールドが表示・非表示を繰り返すようにしたいと思っています。入力フィールドが表示されているときにはボタンは"hide"、非表示の時は"show"が表示されている仕様です。 <div id="input"><input type="text" name="something"></div> <input type="button" id="button" value="hide"> 以下のようにjQueryを組んでみました。 $(document).ready(function(){ if($("#button").attr("value") == "hide"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().hide(), $("#button").attr("value", "show"); }); } else if($("#button").attr("value") == "show"){ $("#button").click(function(){ alert("VALUE=" + $("#button").attr("value")), $("#input").children().show(), $("#button").attr("value", "hide"); }); } }); まず、hideボタンを押すとhideのアラートが出てフィールドが非表示になり、showというボタンのみが残ります。次にshowボタンを押すと、showのアラートは表示されますが、フィールドが再表示されず、ボタンもshowのままです。 elseのalertまで行っているのにその後が機能しないのは何故でしょうか？
- ベストアンサー
- JavaScript