ラジオボタンの選択状況（組み合わせ）によって特定の画像を表示させ、各画像にリンクを追加したいです。

Question

実現したいこと

ラジオボタンの選択状況（組み合わせ）によって特定の画像を表示させ、各画像にリンクを追加したいです。

※4つのラジオボタンが用意されていることを前提に質問したいと思います。
※それぞれのラジオボタンを「A」「B」「1」「2」と呼ぶことにします。
※AとBのnameは「First」として、1と2のnameは「Second」です。
※ちなみに、「A」と「1」は最初から選択されているということで。
※「A」と「1」が選択されている状態では画像ファイル「A1.png」が表示されています。
次に、「A」を選択している状態でラジオボタンの「2」を選択すると画像ファイル「A2.png」が表示されます。
Bが選択されている場合も同じです。1が選択されたら～を、2が選択されたら～をという感じです。

では質問ですが、

※画像の切り替えまでのJS実装ができましたが、それぞれの画像にリンクを追加したいです。今のJSに追加した場合はソースコードの書き方を教えていただきたいです。

該当のソースコード

<!--htmlです-->

<p>
<label>A<input type="radio" name="First" onClick="changeImg();" checked></label>
<label>B<input type="radio" name="First" onClick="changeImg();"></label>
</p>

<p>
<label>1<input type="radio" name="Second" onClick="changeImg();" checked></label>
<label>2<input type="radio" name="Second" onClick="changeImg();"></label>
</p>

<p><img src="A1.png" name="wear"></p>


<!--ここからjsプログラムです-->
function changeImg(){
var First = document.getElementsByName("ei");
var Second = document.getElementsByName("suu");

       if(First[0].checked){

		if(Second[0].checked){

		document.wear.src = "A1.png";

		}else{

		document.wear.src = "A2.png";

		}

	}else{

		if(Second[1].checked){

		document.wear.src = "A3.png";

		}else{

		document.wear.src = "A4.png";

		}

	}

}

Comments

[mouse_484]

画像にリンクを貼るとはどのようなことを指していますか？
単純にaで囲むとか（？）

[Cocode]

画像をaタグで囲んだ場合、href属性にかくパスはそれぞれなんですか？

[Wei]

ありがとうございます。
A1～A4それぞれの画像をクリックして他のページに飛ぶようにしたいです。

単純にaで囲むとか（？）
→JSのどこにどういうふうに書けばいいでしょうか><"

[Wei]

Cocodeさん、そうです！href属性にかくパスはそれぞれです。

Answer 1

HTMLのタグの中に直接onClick=""と書く方法は、現在のモダンなコーディングでは推奨されていませんので、JavaScriptコードのなかでそれぞれのラジオボタンにイベントをつけるようにしてみました。

• 動作確認用サンプル：https://jsfiddle.net/ez35dvcr/

<p>
  <label>A<input type="radio" name="First" value="A" checked></label>
  <label>B<input type="radio" name="First" value="B"></label>
</p>

<p>
  <label>1<input type="radio" name="Second" value="1" checked></label>
  <label>2<input type="radio" name="Second" value="2" ></label>
</p>

<p><a href="https://example.com/A1.png" id="image-link"><img src="A1.png" id="image-result"></a></p>

window.addEventListener('DOMContentLoaded', () => {
	// ラジオボタンを全て取得
	const radioBtns = document.querySelectorAll('input[type=radio]');
  
    // それぞれのボタンにクリックイベントをつける
	radioBtns.forEach(btn => btn.addEventListener('click', changeImg));
});

// 画像とパスを変える関数（クリックイベントの内容）
function changeImg(event) {
  // 要素を取得
  const firsts = document.querySelectorAll('input[name=First]');
  const seconds = document.querySelectorAll('input[name=Second]');
  const aTag = document.querySelector('#image-link');
  const imgTag = document.querySelector('#image-result');
  
  const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value; // A or B
  const secondVal = seconds[0].checked ? seconds[0].value : seconds[1].value; // 1 or 2
  const imgName = firstVal + secondVal; // A1 or A2 or B1 or B2
  
  const path = {
    A1: 'https://ant.ac.jp/',
    A2: 'https://apple.com/services/',
    B1: 'https://example.com/bed/',
    B2: 'https://www.blue.co.jp'
  }[imgName]; // オブジェクトを作って、key（imgName）で指定
  
  // パスに反映
  aTag.href = path;
  imgTag.src = `../images/${imgName}.png`;
}

連想配列から1つを選ぶ

  const path = {
    A1: 'https://ant.ac.jp/',
    A2: 'https://apple.com/services/',
    B1: 'https://example.com/bed/',
    B2: 'https://www.blue.co.jp'
  }[imgName];

↑この部分ちょっと意味合い的にswitch文に似ていて、
switchで書くと↓こんな感じになるんですが、行数が多すぎるので、私は↑のようにオブジェクト（連想配列）でする方が好みです。

  let path;
  switch (imgName) {
  	case 'A1': 
      path = 'https://ant.ac.jp/';
      break;
    case 'A2':
      path = 'https://apple.com/services/';
      break;
    case 'B1':
      path = 'https://example.com/bed/';
      break;
    case 'B2':
      path = 'https://www.blue.co.jp';
      break;
    default:
      break;
  }

三項演算子

「？」と「：」を使った記述は、三項演算子というif文を1行で書けてしまう優れものです。
例）const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value;

条件式 ? trueのときの処理 : falseの時の処理

if (条件式) {
  trueのときの処理
} else {
  falseの時の処理
}

テンプレートリテラル

文字列はシングルクォート''またはダブルクォート""でかこって記述します。
しかしこの記述方法で変数を混ぜて書こうとすると、読みにくくなります。

let name = 'たけし';
let greet = 'こんにちは、' + name + 'さん！'; // 'こんにちは、たけしさん！'

テンプレートリテラルという記法は、シングルやダブルクオートの代わりにバッククォート``を使います。
この記法の利点の一つは、ドルマークと波括弧で囲うことで${変数名}、中に変数を混ぜて書くことができることです。
コードが読みやすいですね。

let name = 'たけし';
let greet = `こんにちは、${name}さん！`; // 'こんにちは、たけしさん！'

このテンプレートリテラルを利用して、画像のsrcのパスを生成しています。

const imgName = firstVal + secondVal;
// 'A1' or 'A2' or 'B1' or 'B2' が生成される

imgTag.src = `../images/${imgName}.png`;
// '../images/A1.png' or '../images/A2.png' or '../images/B1.png' or '../images/B2.png' が生成される

定数imgNameには、生成された文字列「A1」「A2」「B1」「B2」のいずれかが代入されています。
その定数を、テンプレートリテラルでsrcのパスとなる文字列の中に混ぜて書いています。
ですので結果的に、'../images/A1.png'または'../images/A2.png'または'../images/B1.png'または'../images/B2.png'のいずれかの文字列が生成されます。

Comments

[Wei]

お答えいただきありがとうございました。

スキルが足りなくて申し訳ございませんが、ソースコードのどこに変えればよいでしょうか。。。><
画像4枚A1,A2,A3,A4とリンク四つがありますが。。。><

[Cocode]

ここで、aタグのhrefのパス
aTag.href = `https://example.com/${firstVal}${secondVal}.png`;

ここで、imgのsrcのパス
imgTag.src = `${firstVal}${secondVal}.png`;

を変えられます。

バッククォート``で囲った中は、シングルクォート''と同じで文字列なのですが、
バッククォートのなかで ${変数など} を書くこともできます。
なので私は、${firstVal}${secondVal} とかくことで、「A1」「A2」「B1」「B2」が代入されるようにしています。

[Cocode]

もしhrefがA1とかと全く関係のないURLでしたら、この方法は使えません。
その場合は教えてください〜。コード修正します。

[Wei]

やってみたけど、うまくいかなかった。
hrefがA1と全く関係のないULRでした。説明不足で申し訳ございません。。。><

他の人の回答でやってみてうまく動いたので、解決できたかと思います。
詳しくコードまで説明していただきありがとうございましたm(_ _)m

[Wei]

度々申し訳ございませんが、Cocodeさんが書いたソースコードを勉強したいので、
hrefがA1と全く関係のないURLでしたら、どんな感じなコードになりますでしょうか。

[Cocode]

書いてみます💡

[Cocode]

回答のコードと動作確認サンプルを更新しました！
質問者様が当初かかれていたif文での実装ももちろんいいですが、こういった書き方もできます！
ご自身が読みやすいと思う方など、お好みでどうぞです。

[Wei]

早速のご返信ありがとうございます！
ソースコードを参考させていただきます！
いい勉強になると思いますので、一回やってみます！
本当にありがとうございます！

[Cocode]

はいー！がんばってください✨
ちなみにご存知かもしれませんが

const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value;

↑この部分の「？」とか「：」とか使った記述方法は「三項演算子」といいます。
if文を1行でかけちゃう優れものです。

[Cocode]

条件 ? trueのときの処理 : falseの時の処理

　つまり

if (条件) {
trueのときの処理
} else {
falseの時の処理
}

↑と同じです。

[Wei]

三項演算子って知らなかったです><

詳しく説明していただきありがとうございます。
Cocodeさんの説明が分かりやすくて、本当に勉強になりました！！

今からやってみようと思いますので、頑張ります！
本当にありがとうございます!

[Wei]

度々申し訳ございません...><
今はやっている途中ですが、下記２点をお伺いしたいですが...
１．HTMLの最後一行の「<a href="https://example.com/A1.png" id="image-link">」のリンク"https://example.com/A1.png"のところは、リンクの最後にA1.pngの画像名も入れるんですか？それかリンクのみ入れれば良いでしょうか。

２．const path = {
A1: 'https://ant.ac.jp/',
A2: 'https://apple.com/services/',
B1: 'https://example.com/bed/',
B2: 'https://www.blue.co.jp'
↑JSのこの４つはそれぞれのリンクを入れる場所だと思いますが、画像A1.png、A2.png、A3.png、A4.pngの入れる場所はどこでしょうか。

初心者なので、本当に申し訳ございません><

[Cocode]

1の質問。html修正し忘れていましたすみません！
そちらはふつうにhrefもsrcも、A1画像で飛ぶリンク先、A1画像のsrcパスを書いてください。

私のjsコードと合わせるなら、
hrefには　https://ant.ac.jp/
srcには　../images/A1.png
と書く感じです！
（実際のリンク先も画像のパスも分からないから想定で書いているので、質問者様は実際のものをお書きください！）

2の質問ですが、画像のsrcに関しては、「A1」などの部分以外共通ですよね？
きっと ../images/A1.png とかになりますよね？
../images/｛ここだけ違う｝.png ということですので、回答のコードにあります最終行、

imgTag.src = `../images/${imgName}.png`;

これが画像のsrcになります。
この1行だけで、画像4つ分のパスを表現できています。

[Wei]

お答えいただきありがとうございました。

①について解決できました！
②について、画像のsrcに関しては「A1」などの部分以外共通です。

imgTag.src = `img/${A1,A2,A3,A4}.png`;
→この感じで入れますでしょうか

[Cocode]

いえ違いますー！何もしなくて大丈夫です。
おそらくテンプレートリテラルを理解されていないので、説明を加えて回答を更新します！
少々お待ちを。

[Cocode]

今回選択肢が2x2なので、全体をif文でかく質問者様の方法でも、私の方法でも、そんなに違いはありません。

しかし選択肢が3x3、4x4…と増えていくと、
私の方法では選択肢が1種類ずつ増えるたびにコードが2行多くなるだけなのに対し、
質問者様の手法ですと、3x3になるだけでなんと10行ほどコードが増えます。

なので今後にも使い回しやすいコードをご提案させていただきました！

[Wei]

テンプレートリテラルを理解できていなくて申し訳ございません...><
ソースコードと説明ありがとうございます。
分かりやすくて理解ができました！

先ほどもう一度やってみましたが、リンク先が問題ございませんが、
画像が表示されていないです（；；）

もし画像フォルダーにこの4枚以外の画像が入っている場合はその結果に影響ありますでしょうか。

質問が多くて申し訳ございません><

[Cocode]

私の書いているパスは想定で書いているだけなので、実際のパスに直してください。
質問者様のhtmlファイルと画像のディレクトリ構成、および今現在どのようなコードを書かれているか分かりませんので、どう修正したらいいのかはわたしには分かりません><

・htmlファイルと画像をどこに保存しているのか
・今どんなコードを書いているのか

提示いただけましたら解決のお手伝いができると思います。

[Cocode]

画像フォルダに他の画像データが入っていても問題はないので、原因は書いているパスが間違っている可能性が高いと思っています。

[Wei]

・下記のようにhtmlと画像を保存しています
「test」フォルダーの下に「index.html」ファイルと「img」フォルダー
「img」フォルダーの下に４枚画像「img1.png、img2.png、img3.png、img4.png」

・今のコード↓
html:
<p>
<label>A<input type="radio" name="First" value="A" checked></label>
<label>B<input type="radio" name="First" value="B"></label>
</p>

<p>
<label>1<input type="radio" name="Second" value="1" checked></label>
<label>2<input type="radio" name="Second" value="2" ></label>
</p>

<p><a href="https://ant.ac.jp/" id="image-link"><img src="img/img1.png" id="image-result"></a></p>

javascript:
<script>
window.addEventListener('DOMContentLoaded', () => {
// ラジオボタンを全て取得
const radioBtns = document.querySelectorAll('input[type=radio]');

// それぞれのボタンにクリックイベントをつける
radioBtns.forEach(btn => btn.addEventListener('click', changeImg));
});

// 画像とパスを変える関数（クリックイベントの内容）
function changeImg(event) {
// 要素を取得
const firsts = document.querySelectorAll('input[name=First]');
const seconds = document.querySelectorAll('input[name=Second]');
const aTag = document.querySelector('#image-link');
const imgTag = document.querySelector('#image-result');

const firstVal = firsts[0].checked ? firsts[0].value : firsts[1].value; // A or B
const secondVal = seconds[0].checked ? seconds[0].value : seconds[1].value; // 1 or 2
const imgName = firstVal + secondVal; // A1 or A2 or B1 or B2

const path = {
A1: 'https://ant.ac.jp/',
A2: 'https://apple.com/services/',
B1: 'https://example.com/bed/',
B2: 'https://www.blue.co.jp'
}[imgName]; // オブジェクトを作って、key（imgName）で指定

// パスに反映
aTag.href = path;
imgTag.src = `img/${imgName}.png`;

// 動作確認用コンソールログ
console.log(`href="${aTag.href}"\nsrc="img/${imgName}.png"`);
}
</script>

[Wei]

A1 A2 B1 B2のところは画像名にしなければならないですか...

[Cocode]

4枚の画像の名前を
A1.png、B1.png、A2.png、B2.png に変更してくださいー！

[Cocode]

コードの問題じゃなくて、画像のファイル名が違います！

[Wei]

画像のファイル名を変えたら解決できました！（；；）

ちなみに画像のファイル名が指定された場合はソースコードの修正が可能でしょうか><
（今回は画像のファイル名が指定されていますが.....）

[Cocode]

ですね！コードを修正する必要があります〜。
今回は質問者様がA1.pngといった名前の画像を表示したいと質問に書かれていましたので、その通りのコードを作成しました。

コードをどのように変更するのかは、どのような画像の名前にしたいかによります。

[Wei]

なるほど...画像のファイル名ってソースコードに影響がありますね..
質問をするときにそこまで考えてなくて...(; ;)
実は今回の画像名が指定されていて、複雑のファイル名です（商品の型式です..><）

[Cocode]

私の提案させていただいたコードを少し書き換えるだけで対応可能ですよ〜。

・画像のsrcも、pathみたいに連想配列を利用する。
・または、pathとsrc両方とも1つのswitch文でまとめる。

など、やりかたは色々ありますー！

とりあえずご質問の本題（ラジオボタンで選択された項目によってリンク先を変える）は解決できていると思うので、私からの本件に関する回答は以上とさせていただきます🙇‍♀️

[Wei]

詳しく説明していただきありがとうございます！
いい勉強になりました！！

・画像のsrcも、pathみたいに連想配列を利用する。
・または、pathとsrc両方とも1つのswitch文でまとめる。
→こちらのヒントもありがとうございます！やってみます！

本当にありがとうございました。

Answer 2

htmlでimgをaタグで囲いaのhrefをjs側で変更するのが一番カンタンかと思います。

<p><a id="imgPath" href="#"><img src="A1.png" name="wear"></a></p>

document.wear.src = "xx.png";
document.getElementById("imgPath").href = "変えたいパス";

他にはimgタグにonClickを追加しそこからwindow.location.href = "path"などでページを遷移させることも可能です

Comments

[Wei]

お答えいただきありがとうございました。
やってみましたが、リンクがうまく行かなかった。。。。

[mouse_484]

コード間違えてました修正したのなら動くと思います

[Wei]

動きました！ありがとうございます！

[Wei]

度々申し訳ございません。
こちら動きましたが、最初の状態（”A”と”１”）が選択されたときに画像をクリックしたら動かないです...
ほかのクリックしてまた”A”と”１”を選択して画像をクリックしたら動きます。
最初の状態だけ動かないですが…><

[mouse_484]

html側の初期値が#だからじゃないですか？
値がわかっていないので仮で指定してます

[Wei]

初期値を変えたら解決できました！
お答えいただきありがとうございます。