質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

483閲覧

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

_Lucia

総合スコア25

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/02/27 08:56

編集2023/02/27 21:55

ラジオボタンクリックで画像が切り替わる仕組みです。
プログラムの動作は問題ありませんが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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_Lucia

2023/02/27 12:55

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

0

ベストアンサー

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

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>

投稿2023/02/27 09:10

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

それぞれの数字を引数として渡せば1つで済むように思います。

投稿2023/02/27 09:01

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問