ラジオボタンによる画像呼び出しプログラムの簡略化

ラジオボタンクリックで画像が切り替わる仕組みです。
プログラムの動作は問題ありませんがjsコードが管理にしくい書き方となってしまいました。
こちらのjsコードをリファクタリングをするとすればどのような方法があるでしょうか？

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <script type="text/javascript" src="check.js"></script>
6    </head>
7    <body>
8        <div id="picbox">
9
10            <input type="radio" id="check1" name="pic" onClick="pic1()">
11            <label for="check1"></label>
12
13            <input type="radio" id="check2" name="pic" onClick="pic2()">
14            <label for="check2"></label>
15
16            <input type="radio" id="check3" name="pic" onClick="pic3()">
17            <label for="check3"></label>
18
19            <input type="radio" id="check4" name="pic" onClick="pic4()">
20            <label for="check4"></label>
21
22            <input type="radio" id="check5" name="pic" onClick="pic5()">
23            <label for="check5"></label>
24
25            <input type="radio" id="check6" name="pic" onClick="pic6()">
26            <label for="check6"></label>
27
28            <input type="radio" id="check7" name="pic" onClick="pic7()">
29            <label for="check7"></label>
30
31            <input type="radio" id="check8" name="pic" onClick="pic8()">
32            <label for="check8"></label>
33 
34        </div>
35        <div id="picture">
36
37            <img src="pic1.jpg" id="pic" >
38
39        </div>
40
41    </body>
42</html>

JavaScript
1
2
3function pic1(){
4    pic.src = "pic1.jpg";
5}
6function pic2(){
7    pic.src = "pic2.jpg";
8}
9function pic3(){
10    pic.src = "pic3.png";
11}
12function pic4(){
13    pic.src = "pic4.png";
14}
15function pic5(){
16    pic.src = "pic5.jpg";
17}
18function pic6(){
19    pic.src = "pic6.jpg";
20}
21function pic7(){
22    pic.src = "pic7.jpg";
23}
24function pic8(){
25    pic.src = "pic8.jpg";
26}
27
28

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

回答3件

HTML
1<div id="picbox">
2  <input type="radio" id="check1" name="pic" value="pic1.jpg">
3  <label for="check1"></label>
4  ...
5</div>
6<div id="picture">
7  <img src="pic1.jpg" id="pic">
8</div>
9

javascript
1const radioButtons = document.getElementsByName('pic');
2const img = document.getElementById('pic');
3
4for (let i = 0; i < radioButtons.length; i++) {
5  radioButtons[i].addEventListener('change', (event) => {
6    const selectedRadioButton = event.target;
7    const selectedImagePath = selectedRadioButton.value;
8    img.src = selectedImagePath;
9  });
10}

getElementsByNameメソッドを使用して、name属性が"pic"であるラジオボタンのリストを取得しています。その後、forループを使用して、各ラジオボタンのchangeイベントに対して、選択されたラジオボタンのvalue属性から画像のパスを取得し、img要素のsrc属性に設定する処理を行っています。

投稿2023/02/27 10:13

okuka

総合スコア54

_L9u7c4i0a

2023/02/27 12:55

分かり易いご説明ありがとうございました参考にさせていただきます

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

ベストアンサー

カスタムデータとかつかうとわかりやすいかもしれません

javascript
1<script>
2document.addEventListener('change',e=>{
3  const t=e.target;
4  if(t.matches('[type=radio][name=pic][data-src]')){
5    pic.src=t.dataset.src;
6  }
7});
8</script>
9<div id="picbox">
10<label><input type="radio" name="pic" data-src="pic1.jpg" checked>1</label>
11<label><input type="radio" name="pic" data-src="pic2.jpg">2</label>
12<label><input type="radio" name="pic" data-src="pic3.jpg">3</label>
13<label><input type="radio" name="pic" data-src="pic4.jpg">4</label>
14<label><input type="radio" name="pic" data-src="pic5.jpg">5</label>
15<label><input type="radio" name="pic" data-src="pic6.jpg">6</label>
16<label><input type="radio" name="pic" data-src="pic7.jpg">7</label>
17<label><input type="radio" name="pic" data-src="pic8.jpg">8</label>
18</div>
19<div id="picture">
20<img src="pic1.jpg" id="pic" >
21</div>