teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問javascriptの変数に入れて展開したい

編集履歴

質問編集履歴

3

誤字

2020/07/02 05:49

投稿

nguyenseiji
nguyenseiji

スコア156

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
  現在カテゴリ選択をできる機能を作成中になります
4
4
 
5
+
6
+
5
- 1,html領域にoptionタグでfirstCategoliを決めています
7
+ 1,html領域にoptionタグでユーザーにfirstCategoliのvalueを決めてもらいます
6
8
 
7
9
 
8
10
 
@@ -14,7 +16,7 @@
14
16
 
15
17
 
16
18
 
17
- secondCategoryの初期 disabledはdisnableになります
19
+ secondCategoryの初期値は disabled="disnable"になります
18
20
 
19
21
 
20
22
 
@@ -23,6 +25,10 @@
23
25
 
24
26
 
25
27
  Element.innerHTML = ab;で表示しております
28
+
29
+
30
+
31
+ ab変数はif文とinnerhtmlにより動的にoption情報が変動します
26
32
 
27
33
 
28
34
 
@@ -46,7 +52,7 @@
46
52
 
47
53
 
48
54
 
49
- <div>カテゴリ</div>
55
+ <div>カテゴリ</div>
50
56
 
51
57
 
52
58
 
@@ -70,23 +76,27 @@
70
76
 
71
77
  var categoliDecision = document.getElementById("firstCategoliId");
72
78
 
73
-
79
+
80
+
81
+
74
82
 
75
83
 
76
84
 
77
- '<select name="secondCategory" id="secondCategory" disabled="disanable">'
78
85
 
79
- +
80
86
 
81
- +'<option value="1">トップス</option>'
87
+ var ab ='<select name="secondCategory" id="secondCategory" disabled="disanable">'
82
88
 
83
- + '<option value="2"> ワンピース</option>'
89
+ +
84
90
 
85
- + '<option value="3">ベビー・キッズ</option>'
91
+ +'<option value="1">トップス</option>'
86
92
 
87
- + '<option value="4">小物・ゲーム</option>'
93
+ + '<option value="2"> ワンピース</option>'
88
94
 
95
+ + '<option value="3">ベビー・キッズ</option>'
96
+
97
+ + '<option value="4">小物・ゲーム</option>'
98
+
89
- +
99
+ +
90
100
 
91
101
  '</select>'
92
102
 
@@ -98,9 +108,9 @@
98
108
 
99
109
  if (categoliDecision == 1) {
100
110
 
101
-
102
111
 
112
+
103
- var ab = document.innerHTML =
113
+ document.ab.innerHTML =
104
114
 
105
115
 
106
116
 
@@ -118,13 +128,15 @@
118
128
 
119
129
  +
120
130
 
121
- '</select>'
131
+ '</select>'
122
132
 
123
133
 
124
134
 
125
135
 
126
136
 
137
+ } else {
138
+
127
- }else{var ab = document.innerHTML =
139
+ document.ab.innerHTML =
128
140
 
129
141
 
130
142
 
@@ -142,11 +154,11 @@
142
154
 
143
155
  +
144
156
 
145
- '</select>'
157
+ '</select>'
146
158
 
147
159
 
148
160
 
149
- }
161
+ }
150
162
 
151
163
 
152
164
 

2

古進

2020/07/02 05:49

投稿

nguyenseiji
nguyenseiji

スコア156

test CHANGED
File without changes
test CHANGED
@@ -1,30 +1,44 @@
1
- 現在
1
+ 『やったこと』
2
+
3
+ 現在カテゴリ選択をできる機能を作成中になります
4
+
5
+ 1,html領域にoptionタグでfirstCategoliを決めています
2
6
 
3
7
 
4
8
 
5
- htmlを使用して作った<option>タグ機能を
9
+ 後にfirstCategoliで選択したvalueが1の場合のみsecondCategoryをdisabled="anable"にしました
6
10
 
7
11
 
8
12
 
9
- javascriptの変数に入れて
13
+ firstCategoryのvalueが2以上の場合はdisabled="disanable"になります
10
14
 
11
15
 
12
16
 
13
- javascriptの document.write();で中身を展開したのですが
17
+ secondCategoryの初期 disabledはdisnableになります
18
+
19
+
20
+
21
+ 最後にsecondCategoryをab変数に入れて
14
22
 
15
23
 
16
24
 
17
- うまくいきません
25
+ Element.innerHTML = ab;で表示しております
18
26
 
19
27
 
20
28
 
29
+ 『問題点、質問点』
30
+
21
- 間違えている場所等ありましたらご指揮頂けると助かります
31
+ secondCategoryのoptionがサイトに表示されないです
22
32
 
23
33
 
24
34
 
25
- htmlの中にjavascriptを記載しています
26
35
 
27
36
 
37
+ ご指揮頂けると助かります
38
+
39
+
40
+
41
+ よろしくお願いいたします。
28
42
 
29
43
 
30
44
 
@@ -56,19 +70,11 @@
56
70
 
57
71
  var categoliDecision = document.getElementById("firstCategoliId");
58
72
 
73
+
59
74
 
60
75
 
61
76
 
62
-
63
- if (categoliDecision == 1) {
64
-
65
-
66
-
67
- var ab = document.innerHTML =
68
-
69
-
70
-
71
- '<select name="secondCategory" id="secondCategory" disabled="disabled">'
77
+ '<select name="secondCategory" id="secondCategory" disabled="disanable">'
72
78
 
73
79
  +
74
80
 
@@ -80,7 +86,7 @@
80
86
 
81
87
  + '<option value="4">小物・ゲーム</option>'
82
88
 
83
- +
89
+ +
84
90
 
85
91
  '</select>'
86
92
 
@@ -88,7 +94,59 @@
88
94
 
89
95
 
90
96
 
97
+
98
+
99
+ if (categoliDecision == 1) {
100
+
101
+
102
+
103
+ var ab = document.innerHTML =
104
+
105
+
106
+
107
+ '<select name="secondCategory" id="secondCategory" disabled="anable">'
108
+
109
+ +
110
+
111
+ +'<option value="1">トップス</option>'
112
+
113
+ + '<option value="2"> ワンピース</option>'
114
+
115
+ + '<option value="3">ベビー・キッズ</option>'
116
+
117
+ + '<option value="4">小物・ゲーム</option>'
118
+
119
+ +
120
+
121
+ '</select>'
122
+
123
+
124
+
125
+
126
+
127
+ }else{var ab = document.innerHTML =
128
+
129
+
130
+
131
+ '<select name="secondCategory" id="secondCategory" disabled="disanable">'
132
+
133
+ +
134
+
135
+ +'<option value="1">リンゴ</option>'
136
+
137
+ + '<option value="2"> バナナ</option>'
138
+
139
+ + '<option value="3">ベビー</option>'
140
+
141
+ + '<option value="4">コップ</option>'
142
+
143
+ +
144
+
145
+ '</select>'
146
+
147
+
148
+
91
- }
149
+ }
92
150
 
93
151
 
94
152
 

1

コードの仕様変更

2020/07/02 05:34

投稿

nguyenseiji
nguyenseiji

スコア156

test CHANGED
File without changes
test CHANGED
@@ -28,13 +28,29 @@
28
28
 
29
29
 
30
30
 
31
+ ```html,javascript
31
32
 
32
33
 
33
34
 
35
+ <div>カテゴリ</div>
34
36
 
35
37
 
36
38
 
39
+ <select name="firstCategoryName" id="firstCategoliId">
40
+
41
+ <option value="1">レディース</option>
42
+
43
+ <option value="2"> メンズ</option>
44
+
45
+ <option value="3">ベビー・キッズ</option>
46
+
47
+ <option value="4">小物</option>
48
+
49
+ </select>
50
+
51
+
52
+
37
- <script type="text/javascript">
53
+ <script type="text/javascript">
38
54
 
39
55
 
40
56
 
@@ -48,15 +64,15 @@
48
64
 
49
65
 
50
66
 
51
- var ab = document.querySelector().innerHTML =
67
+ var ab = document.innerHTML =
52
68
 
53
69
 
54
70
 
55
71
  '<select name="secondCategory" id="secondCategory" disabled="disabled">'
56
72
 
73
+ +
57
74
 
58
-
59
- '<option value="1">トップス</option>'
75
+ +'<option value="1">トップス</option>'
60
76
 
61
77
  + '<option value="2"> ワンピース</option>'
62
78
 
@@ -64,7 +80,7 @@
64
80
 
65
81
  + '<option value="4">小物・ゲーム</option>'
66
82
 
67
-
83
+ +
68
84
 
69
85
  '</select>'
70
86
 
@@ -78,10 +94,12 @@
78
94
 
79
95
 
80
96
 
81
- document.write(ab);
97
+ Element.innerHTML = ab;
82
98
 
83
99
 
84
100
 
85
101
 
86
102
 
87
103
  </script>
104
+
105
+ ```