いつもお世話になっております。
現状ラジオボタンの切り替えで
リンクの切り替えと、画像をクリックすると画像が切り替わるところまで実装できておりますが、
画像をクリックで切り替わるのではなく、
ラジオボタンを切り替えた時点で、画像が切り替わる仕様に変更したいと考えています。
調べて試してを繰り返しているのですが、うまくいかず行き詰っております...
勉強不足で申し訳ありません。
アドバイスを頂ければとてもうれしいです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>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/02/17 10:55