- ベストアンサー
JavaScript機能の繰り返し表示方法とは？
- JavaScriptを使ってラジオボタンで表示する画像を変える機能について、同一Webページ内で繰り返して表示する方法がわかりません。
- 1つのスクリプトでは機能するが、2つ以上になるとすべて機能しない状況です。
- この問題の解決方法や可能性について、アドバイスをいただけると助かります。
- paopaotakeshi
- お礼率100% (5/5)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 方法はいくつかありますので1例を ■JavaScriptの部分を下記に変更 function Gazou(mysrc,num){ document.myIMG[num].src=mysrc; } ■HTMLの部分を下記に変更 <center> <img name="myIMG" src="images/icons1.gif" border="0" width="32" height="32"> <br> <FORM> <INPUT type="radio" name="myRB" onClick="Gazou('images/icons1.gif',0)" checked>パンダ <INPUT type="radio" name="myRB" onClick="Gazou('images/icons2.gif',0)">ペンギン <INPUT type="radio" name="myRB" onClick="Gazou('images/icons3.gif',0)">ねこ <INPUT type="radio" name="myRB" onClick="Gazou('images/icons4.gif',0)">ねずみ <INPUT type="radio" name="myRB" onClick="Gazou('images/icons5.gif',0)">ライオン </FORM> </center> <center> <img name="myIMG" src="images/icons1.gif" border="0" width="32" height="32"> <br> <FORM> <INPUT type="radio" name="myRB" onClick="Gazou('images/icons1.gif',1)" checked>パンダ <INPUT type="radio" name="myRB" onClick="Gazou('images/icons2.gif',1)">ペンギン <INPUT type="radio" name="myRB" onClick="Gazou('images/icons3.gif',1)">ねこ <INPUT type="radio" name="myRB" onClick="Gazou('images/icons4.gif',1)">ねずみ <INPUT type="radio" name="myRB" onClick="Gazou('images/icons5.gif',1)">ライオン </FORM> </center> 以下、数を増やすのであればonClick="Gazou('images/icons1.gif',1)"の,1を2～増やして下さい。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
onclickを書きまくるのもなんなので、まったく同じ画像構成でよいのなら… こんなのでは？ （全角空白は半角に） ＊ <div class="changeImage">内のimgとformの構成に適用されます <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div.changeImage { width:25em; text-align:center; border:1px solid #88f; padding:1em; } div.changeImage img { width:32px; height:32px; border:0; } </style> <script type="text/javascript"> <!-- /*@cc_on@*/ (function(){ //画像のアドレスを定義 var images = [ "images/icons1.gif", "images/icons2.gif", "images/icons3.gif", "images/icons4.gif", "images/icons5.gif" ]; //クリックイベントを設定 document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){ var t = evt./*@if(1)srcElement @else@*/target /*@end@*/, elm, e, i, index, d = t.parentNode; if(t.nodeName!= "INPUT" || t.type!="radio") return; while(d && !d.className.match(/(^| )changeImage( |$)/)) d = d.parentNode; if(d){ for(i=0, index=-1, elm=t.form.elements; e=elm[i++];){ if(e.type=="radio"){ index++; if(e.checked) break; } } e = d.getElementsByTagName("img")[0]; if(e) e.src = images[index]; } }, false); })(); //--> </script> </head> <body> <div class="changeImage"> <img src="images/icons1.gif" alt=""> <form> <input type="radio" name="myRB" checked>パンダ <input type="radio" name="myRB">ペンギン <input type="radio" name="myRB">ねこ <input type="radio" name="myRB">ねずみ <input type="radio" name="myRB">ライオン </form> </div> <div class="changeImage"> <img src="images/icons1.gif" alt=""> <form> <input type="radio" name="myRB" checked>パンダ <input type="radio" name="myRB">ペンギン <input type="radio" name="myRB">ねこ <input type="radio" name="myRB">ねずみ <input type="radio" name="myRB">ライオン </form> </div> </body> </html>
お礼
アドバイスありがとうございます。とても専門的で明快なアドバイス感謝します。 これからジャバスクリプトを勉強する私にはレベルが高く感じますが勉強になります。是非、できるまで頑張ってみます。ありがとうございます。
お礼
早々にご回答頂き誠にありがとうございます。 只今、外出中なので、今夜ご指示通りトライしてみます。 助かります。もう、ダメかなと諦めかけていたので、本当に感謝します。 また、結果報告致します。 取り急ぎお礼を申し上げます。