ドロップダウンメニューで画像を変更するプログラムを1つのページ内に複数設置したい。

前提・実現したいこと

htmlとjavascliptを使って以下のタグを使い、ドロップダウンメニューの選択を変えると同時に画像も変わるようにしたいです。
一つのページに複数設置したいので下記のようなソースにしたのですが、そうすると下側にある画像しか動作しません。
どこが悪いのでしょうか…
アドバイスをもらえると嬉しいです。
どうかよろしくお願いします。

該当のソースコード

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="program1" 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<!--画像を配置-->
23<P><IMG src="18img/red.png" width="120" height="120" id="program2" alt=""></p>
24<!--ドロップダウンメニューが変更されたら関数へ値を渡す-->
25<P><SELECT name="channel" size="1" onchange="imgChange(this)">
26<OPTION value="0">レッド
27<OPTION value="1">オレンジ
28<OPTION value="2">グリーン
29<OPTION value="3">ブルー
30<OPTION value="4">グレー
31</SELECT></P>
32</FORM>
33<script>
34function imgChange(parts) {
35/*選択されているメニューを変数へ格納*/
36fname = parts.options[parts.selectedIndex].value;
37/*選択された画像のパスを送る*/
38if (fname == 0) program1.src = "18img/red.png";
39if (fname == 1) program1.src = "18img/orange.png"
40if (fname == 2) iprogram1.src = "18img/green.png"
41if (fname == 3) program1.src = "18img/blue.png"
42if (fname == 4) program1.src = "18img/glay.png"
43}
44function imgChange(parts) {
45/*選択されているメニューを変数へ格納*/
46fname = parts.options[parts.selectedIndex].value;
47/*選択された画像のパスを送る*/
48if (fname == 0) program2.src = "18img/red.png";
49if (fname == 1) program2.src = "18img/orange.png"
50if (fname == 2) program2.src = "18img/green.png"
51if (fname == 3) program2.src = "18img/blue.png"
52if (fname == 4) program2.src = "18img/glay.png"
53}
54</script>
55</body>
56
57</html>

試したこと

img要素のidとscript内のifを一致させた。

補足情報

どうかよろしくお願いします。

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

回答3件

こちらの質問を参考にしてみてください。
上記の質問の回答にもありますが、JavaScriptでは同一名の関数複数宣言することはできません。

投稿2020/12/22 02:35

k_n_h_r

総合スコア58

ベストアンサー

あくまでも一例です。

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="program1" alt=""></p>
14        <!--ドロップダウンメニューが変更されたら関数へ値を渡す-->
15        <P>
16            <SELECT name="channel" size="1" onchange="imgChange(this,program1)">
17                <OPTION value="0">レッド
18                <OPTION value="1">オレンジ
19                <OPTION value="2">グリーン
20                <OPTION value="3">ブルー
21                <OPTION value="4">グレー
22            </SELECT>
23        </P>
24        <P><IMG src="18img/red.png" width="120" height="120" id="program2" alt=""></p>
25        <P>
26            <SELECT name="channel" size="1" onchange="imgChange(this,program2)">
27                <OPTION value="0">レッド
28                <OPTION value="1">オレンジ
29                <OPTION value="2">グリーン
30                <OPTION value="3">ブルー
31                <OPTION value="4">グレー
32            </SELECT>
33        </P>
34    </FORM>
35    <script>
36        function imgChange(parts, id) {
37            /*選択されているメニューを変数へ格納*/
38            fname = parts.options[parts.selectedIndex].value;
39            /*選択された画像のパスを送る*/
40            if (fname == 0) id.src = "18img/red.png";
41            if (fname == 1) id.src = "18img/orange.png";
42            if (fname == 2) id.src = "18img/green.png";
43            if (fname == 3) id.src = "18img/blue.png";
44            if (fname == 4) id.src = "18img/glay.png";
45        }
46    </script>
47</body>

投稿2020/12/22 02:40

Jon_do

総合スコア1373

退会済みユーザー

2020/12/22 02:48

ありがとうございます。では、複数設置し、それぞれ違う画像を表示したい場合は「 if (fname == 5) id.src = "18img/red.png";」「 if (fname == 6) id.src = "18img/red.png";」…　「<OPTION value="5">レッド」「<OPTION value="6">レッド」とすればよいということで正しいでしょうか。

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

Jon_doさん、k_n_h_rさん。ありがとうございます。
よくわかりました！　どうやら成功しそうです。
本当にありがとうございます。
また何かあればどうかよろしくお願いします。

投稿2020/12/22 02:52

退会済みユーザー

総合スコア0