ドロップダウンメニューで画像を変更プログラムを複数設置したい。

こんにちは。
webサイト作りで困ったので質問いたします。

ドロップダウンメニューの選択を変えると同時に画像も変わるようにしたいです。
以下のコードで1つのみの場合実現できたのですが、複数設置するときはどのようにしたらよいのかわかりません。
どうかアドバイス等よろしくお願いいたします。

発生している問題・エラーメッセージ

複数設置しようとすると反応がなくなる。
（ドロップダウンメニューの中から選択しても画像が変わらない。）

該当のソースコード

html
1<FORM>
2<!--画像を配置-->
3<P><IMG src="18img/red.png" width="120" height="120" name="imgsmp"></p>
4<!--ドロップダウンメニューが変更されたら関数へ値を渡す-->
5<P><SELECT name="channel" size="1" onchange="imgChange(this)">
6<OPTION value="0">レッド
7<OPTION value="1">オレンジ
8<OPTION value="2">グリーン
9<OPTION value="3">ブルー
10<OPTION value="4">グレー
11</SELECT></P>
12</FORM>

javascript
1img0=new Image()
2img0.src="18img/red.png"
3img1=new Image()
4img1.src="18img/orange.png"
5img2=new Image()
6img2.src="18img/green.png"
7img3=new Image()
8img3.src="18img/blue.png"
9img4=new Image()
10img4.src="18img/glay.png"
11
12function imgChange(parts){
13/*選択されているメニューを変数へ格納*/
14fname=parts.options[parts.selectedIndex].value;
15/*選択された画像のパスを送る*/
16if(fname==0){document.imgsmp.src = img0.src;}
17if(fname==1){document.imgsmp.src = img1.src;}
18if(fname==2){document.imgsmp.src = img2.src;}
19if(fname==3){document.imgsmp.src = img3.src;}
20if(fname==4){document.imgsmp.src = img4.src;}
21}

試したこと

htmlのonchange="imgChange(this)やjavaのfunction imgChange(parts){などを変えたりした。

おことわり

まだwebデザイン初心者なので表現などが分かりにくければ申し訳ございません。
どうかご回答のほど、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか？
img要素にname属性を使用するのは推奨されておらずidを使えだそうですので
idに変更しています。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>test</title>
8</head>
9
10<body>
11    <FORM>
12        <!--画像を配置-->
13        <P><IMG src="18img/red.png" width="120" height="120" id="imgsmp" alt=""></p>
14        <!--ドロップダウンメニューが変更されたら関数へ値を渡す-->
15        <P><SELECT name="channel" size="1" onchange="imgChange(this)">
16                <OPTION value="0">レッド
17                <OPTION value="1">オレンジ
18                <OPTION value="2">グリーン
19                <OPTION value="3">ブルー
20                <OPTION value="4">グレー
21            </SELECT></P>
22    </FORM>
23    <script>
24        function imgChange(parts) {
25            /*選択されているメニューを変数へ格納*/
26            fname = parts.options[parts.selectedIndex].value;
27            /*選択された画像のパスを送る*/
28            if (fname == 0) imgsmp.src = "18img/red.png";
29            if (fname == 1) imgsmp.src = "18img/orange.png"
30            if (fname == 2) imgsmp.src = "18img/green.png"
31            if (fname == 3) imgsmp.src = "18img/blue.png"
32            if (fname == 4) imgsmp.src = "18img/glay.png"
33        }
34    </script>
35</body>
36
37</html>

投稿2020/12/21 04:40

Jon_do

総合スコア1373

退会済みユーザー

2020/12/22 00:34

ありがとうございます。 IDとはJavaScript内のimgsmpと、HTML内の<P><IMG src="18img/red.png" width="120" height="120" id="imgsmp" alt=""></p>でしょうか。

Jon_do

2020/12/22 00:53

そんな感じです。もともとはname="imgsmp" だったのを id="imgsmp"に変えました。 Javascript内のimgsmp は document.getElementById("imgsmp")の省略形みたいなものです。

退会済みユーザー

2020/12/22 01:08

Javascript内のimgsmpとHTML内の<P><IMG src="18img/red.png" width="120" height="120" id="imgsmp" alt=""></p>の「imgsmp」がid名ということでよろしいでしょうか。両方の"imgsmp"をprogram1というものに変えてみたのですが、、、　正しいでしょうか。　javascriptとhtmlに書いてあるid名が一致すればよいんですよね。

Jon_do

2020/12/22 01:10

その通りです。

退会済みユーザー

2020/12/22 01:25

上のプログラムを複数設置したいです。その場合は下記のようで良いのでしょうか。何度も申し訳ないです。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head> <body> <FORM>  <P><IMG src="18img/red.png" width="120" height="120" id="program1" alt=""></p>  <P><SELECT name="channel" size="1" onchange="imgChange(this)"> <OPTION value="0">レッド <OPTION value="1">オレンジ <OPTION value="2">グリーン <OPTION value="3">ブルー <OPTION value="4">グレー </SELECT></P>  <P><IMG src="18img/red.png" width="120" height="120" id="program2" alt=""></p>  <P><SELECT name="channel" size="1" onchange="imgChange(this)"> <OPTION value="0">レッド <OPTION value="1">オレンジ <OPTION value="2">グリーン <OPTION value="3">ブルー <OPTION value="4">グレー </SELECT></P> </FORM> <script> function imgChange(parts) { /*選択されているメニューを変数へ格納*/ fname = parts.options[parts.selectedIndex].value; /*選択された画像のパスを送る*/ if (fname == 0) program1.src = "18img/red.png"; if (fname == 1) program1.src = "18img/orange.png" if (fname == 2) iprogram1.src = "18img/green.png" if (fname == 3) program1.src = "18img/blue.png" if (fname == 4) program1.src = "18img/glay.png" } function imgChange(parts) { /*選択されているメニューを変数へ格納*/ fname = parts.options[parts.selectedIndex].value; /*選択された画像のパスを送る*/ if (fname == 0) program2.src = "18img/red.png"; if (fname == 1) program2.src = "18img/orange.png" if (fname == 2) program2.src = "18img/green.png" if (fname == 3) program2.src = "18img/blue.png" if (fname == 4) program2.src = "18img/glay.png" } </script> </body> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

行動規範の内容に同意します