ベストアンサー

onClickへの代入について

2008/08/28 12:58

以前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> 以前文字列については関数にして代入せよと教えていただいたのですが、このような場合はどうすればよいのでしょうか。どうぞよろしくお願い致します。

casionet
お礼率90% (39/43)

JavaScript
回答数3
ありがとう数2

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

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

ベストアンサー

moveline
ベストアンサー率72% (35/48)

2008/08/28 14:37 回答No.2

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

質問者

お礼 2008/08/28 15:38

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

質問者

補足 2008/08/29 19:42

すいません。またわからなくなりました。代入がうまくいったので、画像を切り替える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">  </script> </body>

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

fujillin
ベストアンサー率61% (1594/2576)

2008/09/02 19:19 回答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">  </SCRIPT> </BODY> </HTML>

質問者

お礼 2008/09/02 20:01

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

ログインすると、全ての回答が全文表示されます。

moveline
ベストアンサー率72% (35/48)

2008/08/28 14:18 回答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:」を入れるのです。

ログインすると、全ての回答が全文表示されます。