ジャバスクリプト機能の繰り返し表示の仕方を教えて！

解決済

質問者：paopaotakeshi
質問日時：2011/06/15 14:22
回答数：2件

ジャバスクリプトについてはまったくの素人です。
ジャバスクリプトを使ってラジオボタンで表示する画像をかえる機能を下記サイトから見つけました。
http://www.sky.sannet.ne.jp/masapine/java_gazou. …

この機能を添付ファイルのように、同一Webページ内で繰り返して表示し使いたく、プログラムのソースをHTMLのbodyの中に繰り返しコピペしてみたのですが、機能しなくなってしまいます。

同一Webページ内に当該スクリプト1つであれば機能するのですが、2つ以上になると、すべて機能しません。表示するのには方法があるのでしょうか？それともこのようなことは不可能なことなのでしょうか？

どなたかこの疑問にお答え頂ければ幸いです。宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2011/06/15 14:34

こんにちは。

方法はいくつかありますので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～増やして下さい。

- 0
- 件

通報する

この回答へのお礼

早々にご回答頂き誠にありがとうございます。
只今、外出中なので、今夜ご指示通りトライしてみます。
助かります。もう、ダメかなと諦めかけていたので、本当に感謝します。
また、結果報告致します。
取り急ぎお礼を申し上げます。

通報する

お礼日時：2011/06/15 15:31

No.2

回答者： fujillin
回答日時：2011/06/15 22:30

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">

</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>