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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2154閲覧

ラジオボタンの組み合わせで画像切り替え

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/16 05:44

いつもお世話になっております。

現状ラジオボタンの切り替えで
リンクの切り替えと、画像をクリックすると画像が切り替わるところまで実装できておりますが、

画像をクリックで切り替わるのではなく、
ラジオボタンを切り替えた時点で、画像が切り替わる仕様に変更したいと考えています。

調べて試してを繰り返しているのですが、うまくいかず行き詰っております...

勉強不足で申し訳ありません。
アドバイスを頂ければとてもうれしいですm(_ _)m

HTML

1 <div class="wrapper"> 2 3 <img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" id="innerLink" onclick="img()"> 4 5 <div>カラー</div><div id="inner_message">カラーを選択してください。</div> 6 <div>サイズ</div><div id="outer_message">サイズを選択してください。</div> 7 8 <form method="post" name="testpage"> 9 10 <p> 11 ■カラー<br> 12 13 <label> 14 <input type="radio" name="inner" onclick="inner01()" value="赤" checked><span>赤</span> 15 </label> 16 17 <label> 18 <input type="radio" name="inner" onclick="inner02()" value="白"><span>白</span> 19 </label> 20 </p> 21 22 <p> 23 ■サイズ<br> 24 25 <label> 26 <input type="radio" name="outer" onclick="outer01()" value="100" checked> 27 <span>100</span> 28 </label> 29 30 <label> 31 <input type="radio" name="outer" onclick="outer02()" value="200"> 32 <span>200</span> 33 </label> 34 35 </p> 36 37 <input type="button" value="リンク" onclick="link()"> 38 39 </form> 40 41 </div><!--/.wrapper-->

css

1.wrapper { 2 margin: 0 auto; 3 width: 950px; 4}

JS

1<script> 2 3 function inner01(){ 4 document.getElementById("inner_message").innerHTML = "赤"; 5 } 6 7 function inner02(){ 8 document.getElementById("inner_message").innerHTML = "白"; 9 } 10 11 //outer 12 13 function outer01(){ 14 document.getElementById("outer_message").innerHTML = "100"; 15 } 16 17 function outer02(){ 18 document.getElementById("outer_message").innerHTML = "200"; 19 } 20 21 // img 22 function img() { 23 if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) { 24 var elmt = document.getElementById("innerLink"); 25 elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"; 26 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ){ 27 var elmt = document.getElementById("innerLink"); 28 elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100"; 29 30 } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ){ 31 var elmt = document.getElementById("innerLink"); 32 elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}"; 33 34 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ){ 35 var elmt = document.getElementById("innerLink"); 36 elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}"; 37 } 38 } 39 40 // link 41 function link() { 42 if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) { 43 window.location.href =("00-00.html") 44 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ) { 45 window.location.href =("01-00.html") 46 } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ) { 47 window.location.href =("00-01.html") 48 } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ) { 49 window.location.href =("01-01.html") 50 } 51 } 52 53</script>

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

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

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

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

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

guest

回答2

0

ベストアンサー

functionの分け方次第でより綺麗にかけそうです。
あくまで私ならですが・・・以下のようにします。

それぞれの要素をクリックした時に起きてほしい事を明確にし、その処理にどんな情報が必要かを整理していくとすっきりまとまるかと思います!

今回は、imgを独立したfunctionにしたのが設計上のミスといえるかもしれません。

js

1 2//全てのfunctionで参照したい変数を定義 3var imgColor = "red"; 4var imgSize = 100; 5 6var imgElmt = document.getElementById("innerLink"); 7 8function inner01() { 9 imgColor = "red"; 10 document.getElementById("inner_message").innerHTML = "赤"; 11 12 if (imgSize == 100) { 13 imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"; 14 } else { 15 imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}"; 16 } 17 return; 18} 19 20function inner02() { 21 imgColor = "white"; 22 document.getElementById("inner_message").innerHTML = "白"; 23 24 if (imgSize == 100) { 25 imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100}"; 26 } else { 27 imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}"; 28 } 29 return; 30} 31 32 33function outer01() { 34 imgSize = 100 35 document.getElementById("outer_message").innerHTML = "100"; 36 37 if (imgColor == "red") { 38 imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"; 39 } else { 40 imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100}"; 41 } 42 return; 43} 44 45function outer02() { 46 imgSize = 200 47 document.getElementById("outer_message").innerHTML = "200"; 48 49 if (imgColor == "red") { 50 imgElmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}"; 51 } else { 52 imgElmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}"; 53 } 54 return; 55} 56 57// link 58function link() { 59 if (imgColor == "red" && imgSize == 100) { 60 61 window.location.href = ("00-00.html"); 62 } else if (imgColor == "red" && imgSize == 200) { 63 64 window.location.href = ("01-00.html"); 65 } else if (imgColor == "white" && imgSize == 100) { 66 67 window.location.href = ("00-01.html") 68 } else if (imgColor == "white" && imgSize == 200) { 69 70 window.location.href = ("01-01.html") 71 } 72 return; 73}

投稿2019/02/16 08:54

yu-smc

総合スコア610

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

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

退会済みユーザー

退会済みユーザー

2019/02/17 10:55

一から丁寧にご回答していただきありがとうございます! 分かりやすくまとまったコードですね! 私は設計の時点で間違っておりました。。 考えを整理して処理できるようになりたいです>< このたびは勉強になりました。本当にありがとうございます。
guest

0

ぱっと見なんで間違ってたらごめんなさい。
と前置きしておいて、

>ラジオボタンを切り替えた時点で、画像が切り替わる仕様に変更したいと考えています。
ラジオボタンをクリックしたときに走る処理はそれぞれ
inner01()、inner02()、outer01()、outer02()なのでその処理の後でimg()を呼び出したらどうでしょう?

JavaScript

1function inner01() { 2 document.getElementById("inner_message").innerHTML = "赤"; 3 img(); 4 } 5 6 function inner02() { 7 document.getElementById("inner_message").innerHTML = "白"; 8 img(); 9 } 10 11 //outer 12 13 function outer01() { 14 document.getElementById("outer_message").innerHTML = "100"; 15 img(); 16 } 17 18 function outer02() { 19 document.getElementById("outer_message").innerHTML = "200"; 20 img(); 21 } 22

投稿2019/02/16 06:27

junzi

総合スコア279

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

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

退会済みユーザー

退会済みユーザー

2019/02/17 10:59

ご回答、誠にありがとうございます。 なるほど、教えていただいた処理を参考にもう一度やり直してみます。 貴重なお時間をさいていただいて本当にありがとうございます。 勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問