teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問ラジオボタンの組み合わせで画像切替方法

編集履歴

質問編集履歴

2

修正

2018/11/20 09:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -82,33 +82,35 @@
82
82
 
83
83
  // img
84
84
  function img() {
85
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true )
85
+ if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) {
86
86
  var elmt = document.getElementById("innerLink");
87
87
  elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}";
88
-
89
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true )
88
+ } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ){
90
89
  var elmt = document.getElementById("innerLink");
91
90
  elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100";
92
-
91
+
93
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true )
92
+ } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ){
94
93
  var elmt = document.getElementById("innerLink");
95
94
  elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}";
96
95
 
97
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true )
96
+ } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ){
98
97
  var elmt = document.getElementById("innerLink");
99
98
  elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}";
99
+ }
100
100
  }
101
101
 
102
102
  // link
103
103
  function link() {
104
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true )
104
+ if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true ) {
105
105
  window.location.href =("00-00.html")
106
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true )
106
+ } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true ) {
107
107
  window.location.href =("01-00.html")
108
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true )
108
+ } else if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true ) {
109
109
  window.location.href =("00-01.html")
110
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true )
110
+ } else if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true ) {
111
111
  window.location.href =("01-01.html")
112
+ }
112
113
  }
113
114
 
115
+
114
116
  ```

1

修正

2018/11/20 09:56

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,7 @@
11
11
  ```html
12
12
  <div class="wrapper">
13
13
 
14
- <img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" name="innerLink" onclick="img()">
14
+ <img src="http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}" id="innerLink" onclick="img()">
15
15
 
16
16
  <div>カラー</div><div id="inner_message">カラーを選択してください。</div>
17
17
  <div>サイズ</div><div id="outer_message">サイズを選択してください。</div>
@@ -62,52 +62,53 @@
62
62
 
63
63
  ```js
64
64
 
65
- function inner01(){
65
+ function inner01(){
66
- document.getElementById("inner_message").innerHTML = "赤";
66
+ document.getElementById("inner_message").innerHTML = "赤";
67
- }
67
+ }
68
68
 
69
- function inner02(){
69
+ function inner02(){
70
- document.getElementById("inner_message").innerHTML = "白";
70
+ document.getElementById("inner_message").innerHTML = "白";
71
- }
71
+ }
72
72
 
73
- //outer
73
+ //outer
74
74
 
75
- function outer01(){
75
+ function outer01(){
76
- document.getElementById("outer_message").innerHTML = "100";
76
+ document.getElementById("outer_message").innerHTML = "100";
77
- }
77
+ }
78
78
 
79
- function outer02(){
79
+ function outer02(){
80
- document.getElementById("outer_message").innerHTML = "200";
80
+ document.getElementById("outer_message").innerHTML = "200";
81
- }
81
+ }
82
82
 
83
- // img
83
+ // img
84
- function img() {
84
+ function img() {
85
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true )
85
+ if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true )
86
+ var elmt = document.getElementById("innerLink");
86
- document.innerLink.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}"
87
+ elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97100}";
87
-
88
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true )
89
- document.innerLink.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}"
90
-
91
- if ( document.testpage.inner[2].checked == true && document.testpage.outer[0].checked == true )
92
- document.innerLink.src = "img/frame1.jpg"
93
-
94
- if ( document.testpage.inner[3].checked == true && document.testpage.outer[0].checked == true )
95
- document.innerLink.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100}"
96
-
97
- if ( document.testpage.inner[4].checked == true && document.testpage.outer[0].checked == true )
98
- document.innerLink.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}"
99
- }
100
88
 
101
- // link
102
- function link() {
103
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true )
104
- window.location.href =("00-00.html")
105
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true )
89
+ if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true )
106
- window.location.href =("01-00.html")
90
+ var elmt = document.getElementById("innerLink");
91
+ elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97100";
92
+
107
- if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true )
93
+ if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true )
108
- window.location.href =("00-01.html")
94
+ var elmt = document.getElementById("innerLink");
109
- if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true )
95
+ elmt.src = "http://placehold.jp/600x600.png?text={%E8%B5%A4%C3%97200}";
110
- window.location.href =("01-01.html")
111
- }
112
96
 
97
+ if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true )
98
+ var elmt = document.getElementById("innerLink");
99
+ elmt.src = "http://placehold.jp/600x600.png?text={%E7%99%BD%C3%97200}";
100
+ }
101
+
102
+ // link
103
+ function link() {
104
+ if ( document.testpage.inner[0].checked == true && document.testpage.outer[0].checked == true )
105
+ window.location.href =("00-00.html")
106
+ if ( document.testpage.inner[1].checked == true && document.testpage.outer[0].checked == true )
107
+ window.location.href =("01-00.html")
108
+ if ( document.testpage.inner[0].checked == true && document.testpage.outer[1].checked == true )
109
+ window.location.href =("00-01.html")
110
+ if ( document.testpage.inner[1].checked == true && document.testpage.outer[1].checked == true )
111
+ window.location.href =("01-01.html")
112
+ }
113
+
113
114
  ```