onclickで2個指定するには?

このQ&Aのポイント
  • onclickで二つの指定をしたい場合、どのように書けば良いのでしょうか?
  • 「onclick」属性を使用して複数の指定を行いたい場合、指定方法について教えてください。
  • 二つの関数をonclickイベントで指定する方法について教えてください。
回答を見る
  • ベストアンサー

onclickで2個指定するには?

例えば、下記のような二つの指定があるします。 function checkd1(){ document.FORM.CHECK1.checked=true } function checkd2(){ document.write("テスト"); } これをonclickで二つとも指定するということはできるのでしょうか? <a href="#" onclick="checkd1()">ボタン</a> <a href="#" onclick="checkd2()">ボタン2</a> を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

  • egtomo
  • お礼率59% (101/170)

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

  • ベストアンサー
  • venzou
  • ベストアンサー率71% (311/435)
回答No.2

><a href="#" onclick="checkd1(),checkd2()">ボタン</a> <a href="#" onclick="checkd1();checkd2()">ボタン</a> おしいですね。 , ではなく ; なら両方の関数が呼ばれると思います。 (Firefox3とIE6で確認しました。) なぜ ; かと言うと、 Javascriptの文法で、文の区切りは ; だからですね。

egtomo
質問者

お礼

おぉ~できました。 なるほど、;区切りなんですね。 HTMLの流れで考えたらだめですね。 助かりました。 ありがとうございます。

その他の回答 (1)

  • singlecat
  • ベストアンサー率33% (139/418)
回答No.1

function checkd1(){ document.FORM.CHECK1.checked=true; document.write("テスト"); } <a href="#" onclick="checkd1()">ボタン</a> ではダメなのですか?

egtomo
質問者

お礼

早速ありがとうございます。 これはサンプルで簡単に作ったやつなので、その方が早いのですが、実際は全く別のスクリプトになりますので、この方法はちょっと無理なんです。 2つボタンがあり、一つは共通、一つは個別でという風になるので、2つを指定する方法があるとかなり便利だなと調べたんですが、どれもHITしませんでしたので、質問させて頂きました。 ググッてないという事は、やはり無理なんでしょうか?

関連するQ&A

  • チェックボックスの連動でJavaScriptの記述を短くしたい。

    【あ】、【い】という項目があり、それぞれの項目内にA、Bというチェック項目があります。 【あ】項目のAにチェックを入れると【い】のAにもチェックが入るように作りました。 以下のソースでもなんとか動くのですが、【あ】、【い】という項目が増える事とA、Bというチェック項目が増えることが判り、JavaScriptのソースを少しでも短くしたいのですが、なにか好い方法がございましたらお教え頂ければ幸です。 /************参考ソースです*****************/ <html> <head> <title>無題ドキュメント</title> <script> function check_a(){ if(document.form.a.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_b(){ if(document.form.b.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } function check_aa(){ if(document.form.aa.checked==true) { document.form.a.checked=true; document.form.b.checked=false; document.form.aa.checked=true; document.form.bb.checked=false; } } function check_bb(){ if(document.form.bb.checked==true) { document.form.a.checked=false; document.form.b.checked=true; document.form.aa.checked=false; document.form.bb.checked=true; } } </script> </head> <body> <form name="form"> 項目【あ】 <input type="checkbox" name="a" onclick="check_a()"> A<BR> <input type="checkbox" name="b" onclick="check_b()"> B<BR> <br /> 項目【い】 <input type="checkbox" name="aa" onclick="check_aa()"> A<BR> <input type="checkbox" name="bb" onclick="check_bb()"> B<BR> <br /> </form> </body> </html> /*************************/ 何卒、宜しくお願い申上げます。m(_ _)m

  • javascriptにフェードインを追加したい。

    下記のjavascriptに、フェードイン効果を追加するにはどうすればいいでしょうか? 現在は、クリックで、テキストが切り替わる仕様になっているんですが、これにフェードイン、フェードアウトの機能を付け加えたいです。 また、切り替わった際に下記のようにCSSの.actveをclass=""に追加させたいのですが、 どうすれば可能でしょうか? 目的は、アクティブになったボタンの背景を変更したい為です。 <div class="button actve"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン1</a></div> 【javascript】 function ChDsp2(strShow,classHidden){ var tags=document.getElementsByTagName("div"); for(var i=0;i<tags.length;i++){ if(tags[i].className.match('textALL')){ tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,""); if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide'; } } return false; } function checkd1(){ document.FORM.CHECK1.checked=true document.FORM.CHECK2.checked=false document.FORM.CHECK3.checked=false } function checkd2(){ document.FORM.CHECK1.checked=false document.FORM.CHECK2.checked=true document.FORM.CHECK3.checked=false } function checkd3(){ document.FORM.CHECK1.checked=false document.FORM.CHECK2.checked=false document.FORM.CHECK3.checked=true } function change(c) { var f = c.checked, btn = c.form.elements['btn1']; btn.disabled = f?false:true; f = f?'sozai/button_2.jpg':'sozai/button_1.jpg'; btn.style.backgroundImage = 'url(' + f + ')'; } 【HTML】 <div class="button"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン1</a></div> <div class="button"><a href="#" onclick="checkd2();return ChDsp2('text2','textALL');">ボタン2</a></div> <div class="button"><a href="#" onclick="checkd3();return ChDsp2('text3','textALL');">ボタン3</a></div> <div class="clear">&nbsp;</div> <div class="area"> <form name="FORM"> <div id="text1" class="textALL"> その1、ここは最初に表示されています。 </div> <div id="text2" class="textALL hide"> その2、ここはボタン2をクリックで表示されます。 </div> <div id="text3" class="textALL hide"> その2、ここはボタン3をクリックで表示されます。 </div> </form> </div> 上記は、以前頂いたプログラムをわかる範囲で改造したものなのですが、 限界を感じまして、どなたか教えて頂けたら助かります。 宜しくお願いします。

  • javascriptの操作

    二つのチェックボックスがあって、二つにチェックが入ると 「次へ」ボタンの色が変わり押下できる状態にしたいのですが、なかなかうまくいきません。下記ソースだと、二つチェックが入ったらきちんと{ }の中が呼ばれるのですが、急に画面が真っ白になります。 { }の中をdocument.write("hoge");などにすると画面が切り替わり hogeとしか出ません。 どうしたらいいでしょうか?? <!-- function result(){ if(document.getElementById("01").checked == true && document.getElementById("02").checked == true){ var url = "index_02.html"; document.write("<a href=url>"); } } --> <img src="images/bt_next.gif" name="Image1"/></a>

  • 指定の時間でのonclickイベントについて

    はじめまして、よろしくおねがいします。 通常は普通のリンクタグで運用し、指定の時間になると onclickイベントによって、別ウィンドウに指定ページを表示させたい という要件です。 で以下のように書いてみました <script language="JavaScript"> <!-- var now=new Date(); var Tm=now.getHours(); if((Tm>=12)&&(Tm<13)){document.write("<a href='hoge.html' target='_parent' onclick='window.open('http://www.hoge.co.jp/hogege.html')';>ここ</a>");} else if((Tm>=18)&&(Tm<19)){document.write("<a href='hoge.html' target='_parent' onclick='window.open('http://www.hoge.co.jp/hogegehogege.html')';>ここ</a>");} else if((Tm>=22)&&(Tm<23)){document.write("<a href='hoge.html' target='_parent' onclick='window.open('http://www.hoge.co.jp/gegeho.html')';>ここ</a>");} //--> </script> 12時から13時、18時から19時、22時から23時にイベントが発生します。 一応document.writeの内容は時間によって切り変わることの検証は行いましたので、OKなのですが、肝心の別ウィンドウが開きません。 window.open()のように()内を空白にしてみたところ about:blankで別ウィンドウ自体は開きますがURLをいれると駄目みたいです。 上記のことから、大変初歩的なところでつまづいている気がしていますが、間違い部分を御指摘くださればと思います。 それではよろしくおねがいします

  • onClickで指定した以外の画像も変わってしまう

    Youtubeの動画をボタンを使って切り替えるように設定しています。 ========== Youtube動画表示 ========== ボタン1 ボタン2 ボタン3 という感じで配列しています。 ボタン1~3は、それぞれ同じ画像で表示しています。 btn.png:OFF時 btn_on.png:ON時 Javascriptは下記のように書いています。 ================ function change(obj){ var orgimg="img/btn.png"; var newimg="img/btn_on.png"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } }; ================ ボタン部分はそれぞれ下記のようにしています。 ================ <a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a> ================ これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが 同ページ上に表示している全く関係ない画像(例えばタイトル画像やバナー等)が 何故かOFF時の画像が拡大された状態のもの(タイトルやバナーで指定してあるサイズ)に切り替わってしまいます。 CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが 普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。 どこかおかしな部分があると思うのですがわからず途方にくれております。 何方か教えて下さい。どうぞ宜しくお願いします。

  • 関数内でonclickをさせたい

    以下に示すような動作をさせたいのですが、手段はあるでしょうか? ご教示の方よろしくお願いいたします。 <html> <head> <script type="text/javascript"> function test1(){ ここでtest2というリンクをクリックしたことにしたい。 document.getElementById("test2").onclickとか勘でやってみたけどダメでした。 } </script> </head> <body> <img src="hoge.jpg" name="test1" onclick="test1();"> <a href="hoge.html" id="test2">test2</a> </body> </html>

  • javascriptにてonclickを無効

    javascriptにてonclickを無効にしたい 下記のように、onclickイベントキャンセルを書きましたが、 onclickのjavascriptが実行されます。 何かヒントはありませんか? <html> <head> <script language="JavaScript"> document.onclick = function(e) { event.returnValue = false; } </script> </head> <body> <a href="a.htm" onclick="alert('onclick');">onclick有り</a> <a href="a.htm">onclick無し</a> </body> </html> ※環境 Windows2000(sp4)+ie6(sp1)

  • HTML内の指定の位置にプルダウンを読み込みたい

    まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ1 <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ2 </FORM></BODY> </HTML>

  • onClickへの代入について

    以前onClickへの代入方法についてお聞きしましたが、 また壁にぶつかっておりますので教えてください。 バナーのクリック数をカウントするために、GoogleAnalyticsの以下の関数をaタグのonClickに追加して利用しています。 <a href="xxx.html" onClick="javascript:urchinTracker(\'/test/test\');"><img src="xxx.gif"></a> これは問題ないのですが、 Javascriptで画像を切り替えるため以下のような構成でテストしたところ、 src、href、targetは正常に代入されるのですが、 onClickのみjavascript:urchinTracker(\'/test/test\');のままで、/test/aaaが代入されません。 また、元のHTMLソースからonClickタグ自体を削除すると、onClickタグそのものが代入されません。※Firebugで確認しています。 Javascritpt(sample_chg.js)部分 myImage = new Array(4); myImageName = 0; myImageLink = 1; myImageTarget = 2; myImageOnclick = 3; myImage[myImageName] = "dummy01.gif"; myImage[myImageLink] = "http://xxxxx.com/"; myImage[myImageTarget] = "_blank"; myImage[myImageOnclick] = "javascript:urchinTracker(\"/test/aaa\");"; function myChange(){ document.getElementById("myFormImg").src = myImage[myImageName]; document.getElementById("myLink").href =myImage[myImageLink]; document.getElementById("myLink").target =myImage[myImageTarget]; document.getElementById("myLink").onClick =myImage[myImageOnclick]; } HTML部分 <a id="myLink"onClick="javascript:urchinTracker(\'/test/test\');"><img id="myFormImg"></a> <script language="javascript" type="text/javascript" src="/js/sample_chg.js"></script> <script language="javascript" type="text/javascript"> myChange(); </script> 以前文字列については関数にして代入せよと教えていただいたのですが、 このような場合はどうすればよいのでしょうか。 どうぞよろしくお願い致します。

  • クリック→テキストボックスに追加

    下記は、クリックすると、テキストボックスの文字が入れ代わります。こうでなく、「どれどれそれからどうした」と追加していくようにするにはどうしたらよいでしょうか? <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どれどれ'">どれどれ</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='それから'">それから</A><BR> <A HREF="javascript:function voi(){};voi()" onClick="document.myform.bun.value='どうした'">どうした</A><BR> <FORM name="myform"> <INPUT TYPE="TEXT" NAME="bun" SIZE="50"> </form>

専門家に質問してみよう