回答編集履歴
3
間違い修正
test
CHANGED
@@ -120,7 +120,7 @@
|
|
120
120
|
|
121
121
|
var targetElm = document.getElementById(foodKind);
|
122
122
|
|
123
|
-
targetElm.disabled = selectedFoodKind ==
|
123
|
+
targetElm.disabled = selectedFoodKind !== foodKind;
|
124
124
|
|
125
125
|
targetElm.style = selectedFoodKind === foodKind ? "display:inline" : "display:none";
|
126
126
|
|
2
display:block を display:inline に変更
test
CHANGED
@@ -122,7 +122,7 @@
|
|
122
122
|
|
123
123
|
targetElm.disabled = selectedFoodKind === foodKind ? null : true;
|
124
124
|
|
125
|
-
targetElm.style = selectedFoodKind === foodKind ? "display:
|
125
|
+
targetElm.style = selectedFoodKind === foodKind ? "display:inline" : "display:none";
|
126
126
|
|
127
127
|
}
|
128
128
|
|
1
js の中の文字列中の html を排除
test
CHANGED
@@ -83,3 +83,121 @@
|
|
83
83
|
|
84
84
|
|
85
85
|
配列を連想配列に変更し、食べ物の種別をキーにしてみました。
|
86
|
+
|
87
|
+
|
88
|
+
|
89
|
+
---
|
90
|
+
|
91
|
+
|
92
|
+
|
93
|
+
追記です。
|
94
|
+
|
95
|
+
|
96
|
+
|
97
|
+
html を js の中の文字列に埋め込んでいるのが気に食わなかったので、改変しました↓
|
98
|
+
|
99
|
+
|
100
|
+
|
101
|
+
```html
|
102
|
+
|
103
|
+
<!DOCTYPE html>
|
104
|
+
|
105
|
+
<html lang="ja">
|
106
|
+
|
107
|
+
<head>
|
108
|
+
|
109
|
+
<meta charset="UTF-8" />
|
110
|
+
|
111
|
+
<title>Document</title>
|
112
|
+
|
113
|
+
<script languge="javascript">
|
114
|
+
|
115
|
+
var foodKinds = ['ラーメン', '蕎麦', 'カレーライス'];
|
116
|
+
|
117
|
+
function change(selectedFoodKind) {
|
118
|
+
|
119
|
+
for (var foodKind of foodKinds) {
|
120
|
+
|
121
|
+
var targetElm = document.getElementById(foodKind);
|
122
|
+
|
123
|
+
targetElm.disabled = selectedFoodKind === foodKind ? null : true;
|
124
|
+
|
125
|
+
targetElm.style = selectedFoodKind === foodKind ? "display:block" : "display:none";
|
126
|
+
|
127
|
+
}
|
128
|
+
|
129
|
+
}
|
130
|
+
|
131
|
+
</script>
|
132
|
+
|
133
|
+
</head>
|
134
|
+
|
135
|
+
<body>
|
136
|
+
|
137
|
+
<form name="FORM1">
|
138
|
+
|
139
|
+
|
140
|
+
|
141
|
+
<div>
|
142
|
+
|
143
|
+
<input type="radio" name="radio1" value="ラーメン" id="r1" checked onclick="change(this.value)"><label for="r1">ラーメン</label>
|
144
|
+
|
145
|
+
<input type="radio" name="radio1" value="蕎麦" id="r2" onclick="change(this.value)"><label for="r2">蕎麦</label>
|
146
|
+
|
147
|
+
<input type="radio" name="radio1" value="カレーライス" id="r3" onclick="change(this.value)"><label for="r3">カレーライス</label><br>
|
148
|
+
|
149
|
+
</div>
|
150
|
+
|
151
|
+
|
152
|
+
|
153
|
+
<select id="ラーメン" name="select1">
|
154
|
+
|
155
|
+
<option value="醤油ラーメン">醤油ラーメン</option>
|
156
|
+
|
157
|
+
<option value="味噌ラーメン">味噌ラーメン</option>
|
158
|
+
|
159
|
+
<option value="塩ラーメン">塩ラーメン</option>
|
160
|
+
|
161
|
+
<option value="とんこつラーメン">とんこつラーメン</option>
|
162
|
+
|
163
|
+
</select>
|
164
|
+
|
165
|
+
|
166
|
+
|
167
|
+
<select id="蕎麦" name="select2" style='display:none' disabled>
|
168
|
+
|
169
|
+
<option value="もりそば">もりそば</option>
|
170
|
+
|
171
|
+
<option value="かき揚げそば">かき揚げ蕎麦</option>
|
172
|
+
|
173
|
+
<option value="カレー南蛮">カレー南蛮</option>
|
174
|
+
|
175
|
+
<option value="天ぷらそば">天ぷらそば</option>
|
176
|
+
|
177
|
+
</select>
|
178
|
+
|
179
|
+
|
180
|
+
|
181
|
+
<select id="カレーライス" name="select3" style='display:none' disabled>
|
182
|
+
|
183
|
+
<option value="チキンカレー">チキンカレー</option>
|
184
|
+
|
185
|
+
<option value="ビーフカレー">ビーフカレー</option>
|
186
|
+
|
187
|
+
<option value="ほうれん草カレー">ほうれん草カレー</option>
|
188
|
+
|
189
|
+
<option value="キーマカレー">キーマカレー</option>
|
190
|
+
|
191
|
+
</select>
|
192
|
+
|
193
|
+
|
194
|
+
|
195
|
+
<input type=submit value="send">
|
196
|
+
|
197
|
+
</form>
|
198
|
+
|
199
|
+
</body>
|
200
|
+
|
201
|
+
</html>
|
202
|
+
|
203
|
+
```
|