• ベストアンサー

onClickへの代入について

以前onClicｋへの代入方法についてお聞きしましたが、 また壁にぶつかっておりますので教えてください。 バナーのクリック数をカウントするために、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://ｘｘｘｘｘ.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> 以前文字列については関数にして代入せよと教えていただいたのですが、 このような場合はどうすればよいのでしょうか。 どうぞよろしくお願い致します。

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

  • ベストアンサー
  • moveline
  • ベストアンサー率72% (35/48)
回答No.2

#1です myImage[myImageOnclick] = urchinTracker("/test/aaa"); ではなくて myImage[myImageOnclick] = function(){urchinTracker("/test/aaa");} の方がいいかもしれないです。

casionet
質問者

お礼

早速のご回答ありがとうございます。 HTML部分を以下の記述に変更し早速試してみました。 <a id="myLink"onclick="alert('HELLO')"> 正常に代入されればクリック時にアラートが出ないはずですが、 なぜかアラートがでてしまいます。 いろいろ修正したところ、 教えていただいたJavascript部分 document.getElementById("myLink").onClick = function(){myImage[myImageOnclick]();}; の onClick = を onclick = に修正するとアラートがでなくなりました。 試しに代入される関数をalert('こんにちは')にすると、 「こんにちは」というアラートが出ましたので、正常に動作しているようです。 なぜ大文字だとダメなのかよくわからないのですが、 とりあえず問題は解決したようです。 正常にクリックが取得できているかどうかがわかるまではもう少しかかるのですが、取り急ぎお礼を。 本当にありがとうございました。

casionet
質問者

補足

すいません。またわからなくなりました。 代入がうまくいったので、画像を切り替えるscriptを組んでみたのですが、 なぜかonClickの関数の順番がずれてしまいます。 サンプルを作りました。 http://oreryu.sakura.ne.jp/sample/test.html 本来最初の画像をクリックすると「画像01」というアラートが出るはずなのですが、 「画像02」が出てしまいます。※元の質問にあるクリック数の関数でも同様です。 他の設定は全て正常なのですが、なぜonClickの順番がずれるのでしょうか。 本来の質問から逸れてしまっていますが、もしご指摘いただけると助かります。 ※分かりやすくするため、script部分の記述を回答しただいた方法と若干変えております。 banner= new Array(); banner[0]=new Array("dummy01.gif","#","_top",function(){alert('画像01')}); banner[1]=new Array("dummy02.gif","#","_top",function(){alert('画像02')}); banner[2]=new Array("dummy03.gif","#","_top",function(){alert('画像03')}); banner[3]=new Array("dummy04.gif","#","_top",function(){alert('画像04')}); time= new Array(); //バナーの表示時間　上から表示順 time[0]=(2000);　 time[1]=(3000);　 time[2]=(4000);　 time[3]=(5000);　　 var menu=0; var myImageName = 0; var myImageLink = 1; var myImageTarget = 2; var myImageOnclick = 3; function myChange(){ document.getElementById('myFormImg').src = banner[menu][myImageName]; document.getElementById('myLink').href =banner[menu][myImageLink]; document.getElementById('myLink').target =banner[menu][myImageTarget]; document.getElementById('myLink').onclick = function(){banner[menu][myImageOnclick]();}; timerID = setTimeout("myChange()",time[menu]); if(menu == banner.length-1){ menu=0; }else{ menu++; } } HTML部分 <body> <a href="#" onClick="" id="myLink"><img src="" border="0" id="myFormImg"></a> <script language="javascript" type="text/javascript" src="sample_chg_03.js"></script> <script language="javascript" type="text/javascript"> <!-- myChange(); //--> </script> </body>

その他の回答 (2)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

横からですみませんが・・・ 番号がずれる理由ははっきりしませんが、確かにそうなりますね。 その他にクリック後（アラートにOKした後）画像が1に戻るという不都合があるようですね。（これは予定通りなのかな？） この原因は、onclick処理後にhref（この場合は#）へのジャンプが実行されるためなので、実際にリンクを生かす場合は問題になりませんが、scriptを実行するだけの場合はreturn falseをいれておく必要があります。 画像やjsファイルを用いずにHTMLファイルのみでテストできるように、以下のように簡略化しましたが、多分、ご希望の動作になります。（手元にあったIE6、Opera8で確認） 変更点は2箇所です。 　１）onclickへの代入内容にreturn falseを付加える 　２）　〃　の代入部分のfunction()を削除 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> <a href="#" onClick="" id="myLink"><img src="" border="0" id="myFormImg"></a> <SCRIPT TYPE="text/javascript"> <!-- banner= new Array(); banner[0]=new Array("dummy01.gif","#","_top",function(){alert('画像01');return false;}); banner[1]=new Array("dummy02.gif","#","_top",function(){alert('画像02');return false;}); banner[2]=new Array("dummy03.gif","#","_top",function(){alert('画像03');return false;}); banner[3]=new Array("dummy04.gif","#","_top",function(){alert('画像04');return false;}); time=5000;　 var menu=0; myChange(); function myChange(){ document.getElementById('myFormImg').alt = banner[menu][0]; document.getElementById('myLink').href =banner[menu][1]; document.getElementById('myLink').target =banner[menu][2]; document.getElementById('myLink').onclick = banner[menu][3]; timerID = setTimeout("myChange()",time); if(menu == banner.length-1){menu=0;} else {menu++;} } //--> </SCRIPT> </BODY> </HTML>

casionet
質問者

お礼

ありがとうございます。 まだずっと考えており、少々あきらめていましたが、 ご指摘のソースで希望通り動きました！ http://oreryu.sakura.ne.jp/sample/test2.html 画像によって表示する長さを変えたいので、 その部分のみ変更を加えましたが問題ありません。 これでやっと一つ仕事がおわれそうです。 助かりました。ありがとうございました。

  • moveline
  • ベストアンサー率72% (35/48)
回答No.1

＞myImage[myImageOnclick] = "javascript:urchinTracker(\"/test/aaa\");"; この部分を myImage[myImageOnclick] = urchinTracker("/test/aaa"); にして、 ＞document.getElementById("myLink").onClick =myImage[myImageOnclick]; この部分を document.getElementById("myLink").onClick = function(){myImage[myImageOnclick]();}; してみたら多分いけるのではないかと。 確認してないのでなんともいえませんが。 あと、「onClick="javascript:urchinTracker(\'/test/test\');"」の部分ですが、onClick属性のときは「javascript:」は不要です。 href属性にJavaSciptの関数などを入れる場合のみ、先頭に「javascript:」を入れるのです。

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

関連するQ&A

  • getElementByIdでonClick内を書き換える方法

    お尋ねします。 適当なIDを振ったaタグ内の各プロパティを画像の切り替えに応じて 書き換えるスクリプトを試しています。 srcや画像の切り替えなどはうまくいくのですが、 onclicｋ内だけうまく書き換えができません。 onclickはイベントハンドラだから無理という気がするのですが、 なにか方法はないでしょうか。 以下のようなスクリプトを書いています。 myImageName = 0; myImageLink = 1; myImageTarget = 2; myclick = 3; myImage = new Array(); myImage[0]= new Array("01.jpg","ttp://aa.com/","_top","alert('HELLO')"); myImage[1]= new Array("02.gif","ttp://bb.com/","_blank","alert('HI')"); i = 0; function aaa(){ document.getElementById("banner").src = myImage[i][myImageName]; document.getElementById("banner").href =myImage[i][myImageLink]; document.getElementById("banner").target =myImage[i][myImageTarget]; document.getElementById("banner").onclick =myImage[i][myclick]; } ※あとはタイマー用のスクリプトが続きます。 記述が間違っている気はするのですが、 解決策がわかりません。 よろしくお願いいたします。

  • 関数内で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>

  • onclick属性に外部jsと外部cssの記載方法

    表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。

  • 関数内でonclickし、必要部分を表示させたい

    Q&Aサイトを作成しており、自己解決できない問題に直面し、大変困っております。 ＜理想の動作＞ 答え1の「こちら」をクリックしたら、「100.質問」がクリックされた状態にし、 答え2の部分を表示させるようにしたいのです。 答え1の「こちら」をクリックしたら、答え2の部分を表示させるようにアンカーを 設定しているつもりですが、うまく飛びません。 記述方法を検索して、色々試したのですが、なかなか自己解決できません。 ヒントでも構いませんので、どのように記述すればいいのか教えて頂けませんか？ よろしくお願いいたします。 <script type="text/javascript"> <!-- function Aanswer(n) { var target = document.getElementById('answerbox'+n); if( target.style.display != "block" ) { target.style.display = "block"; } else { target.style.display = "none"; } } function myLink01() { location.href = "test.html#show02"; } // --> </script> <title>TEST</title> </head> <body> <dl> <dt onclick="Aanswer(1)">1. 質問</dt> <dd id="answerbox1" onclick="Aanswer(1)">答え1<br /><a href="javascript:myLink01()">こちら</a>を参照してください。</dd> </dl> <dl> <dt onclick="Aanswer(2)">100. 質問</dt> <dd id="answerbox2" onclick="Aanswer(2)"><a name="show02">答え100</a></dd> </dl> </body> </html>

  • JavaScript onClick

    JavaScript初心者です。 クリックしたら音が出るようにしたいのですが音がでません。 どなたかご回答よろしくお願いします。 <html> <head> <script language = "JavaScript"> <!-- function sound(name){ document.all.music.src = name; } --> </script> </head> <body> <bgsound src = # id = music autostart = true loop = true> <a href = # onClick = sound("img/oto.mp3")> <img src="img/picture.jpg"> </a> </body> </html>

  • innerHTMLにて設定した情報を再度取得する事は可能でしょうか？

    innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか？ 下記のコードを考えてみたのですが、 再取得出来ません。 環境はXPでIE6とFF3です。 ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>DOM情報の再取得</title> <script type="text/javascript" language="JavaScript"> <!-- function setText1(data) { document.getElementById("test1").innerHTML = data; return false; } function setText2(data) { document.getElementById("test2").innerHTML = data; return false; } function setText3(data) { document.getElementById("test3").innerHTML = data; return false; } //--> </script> </head> <body> <div id="test1"></div> <div id="test2">　</div> <div id="test3">テスト3</div> <br> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> <a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a> <a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a> <script type="text/javascript" language="JavaScript"> <!-- document.write("<br><br>\n"+'再取得'+"<br><br>\n"); //document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n");//エラーになるのでコメントアウト document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n"); document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n"); //--> </script> </body> </html>

  • javascriptで画像をテーブルに出力する方法

    javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。 <html> <head> <script language="JavaScript"><!-- myImageCnt = 4; myImage = new Array( "img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg" ); myNowCnt = 0; function myChange(){ if (myNowCnt == myImageCnt-1){ myNowCnt=0; }else{ myNowCnt++; } document.myFormImg.src = myImage[myNowCnt]; setTimeout( "myChange()" ,5000 ); } // --></script> <img src="img0.jpg" width="200" height="200" name="myFormImg" /> <script language="JavaScript"><!-- myChange(); // --></script> </head> </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)

  • document.write内のhrefは被リンクとして認識される？

    こんにちは、 たとえば、google等のSEO対策で <a href="http://hogehoge.com">hogehoge</a> をソースに入れれば、被リンクとして認識されると思うのですが、 これを <script type="text/javascript" src="http://hogehoge.com/test.js"> </script> とし、 test.jsに document.write('<script type="text/javascript" src="http://hogehoge.com/test.js"> </script>'); と書いた場合は、このJscript内のリンクは被リンクとして認識されるのでしょうか？ ご存知の方、よろしくお願いいたします。

  • onClickで2回目のクリックでもとの画像に戻す

    いつもお世話になっております。 JavaScriptで質問があり、投稿させていただきます！ JavaScriptでサイドメニューを作成しています。 折りたたみにしていて、大メニューをクリックで小メニューを開くようにしています。 大メニューは画像で作成し、小メニューはテキストなのですが、 大メニューをクリックし、小メニューが開いたときに、大メニューの画像を変更。 大メニューをクリックし、小メニューを閉じたときに、大メニューの画像を元に戻す。 としたいのですが、うまくいきません・・・。 スクリプトとHTMLは以下です。 [[JavaScript]] <script type="text/javascript"><!-- function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } //--></script> [[HTML]] <h2><a href="../sample/index.html" onclick="oritatami('o0');return false"><img src="image/fg.jpg" width="210" height="26" onclick="this.src='image/fg_on.jpg'" onlclick="this.src='image/fg.jpg'"/></a></h2> <div id="o0" style="display:none"> <ul> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> <li><a href="URL">Bible Flight</a> </ul> </div> これでは、1回目のクリックで大メニューの画像は変わるのですが、2回目のクリックでは何もわかりません・・・。 どなたか、ご存知の方、ご教授いただけないでしょうか！！ よろしくお願いします！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する