質問編集履歴

5

修正

2021/10/23 06:54

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,8 @@
8
8
 
9
9
  ※こちらも一つのselectしか取れません
10
10
 
11
+ ※.getElementsByClassName、 document.querySelectorAllにすると動作しなくなります
12
+
11
13
  ```ここに言語を入力
12
14
 
13
15
 
@@ -46,7 +48,7 @@
46
48
 
47
49
  ```ここに言語を入力
48
50
 
49
- let fruitSelect = document.querySelectorAll('.fruit');
51
+ let fruitSelect = document.querySelector('.fruit');
50
52
 
51
53
  fruitSelect.addEventListener('change', valueChange);
52
54
 

4

誤字

2021/10/23 06:54

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  ```ここに言語を入力
48
48
 
49
- let fruitSelect = document.querySelector('.fruit');
49
+ let fruitSelect = document.querySelectorAll('.fruit');
50
50
 
51
51
  fruitSelect.addEventListener('change', valueChange);
52
52
 

3

誤字

2021/10/23 06:51

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 正常に動作動作する場合はselectで選択を行うと select 要素で change イベントが発生したときにdisabled = falseにならないといけません。
5
+ 正常に動作する場合はselectで選択を行うと select 要素で change イベントが発生したときにdisabled = falseにならないといけません。
6
6
 
7
7
  途中まで制作中のサンプル
8
8
 

2

修正

2021/10/23 06:49

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,12 @@
1
1
  jsでフォームに何か入力があればdisabledが解除されるjsを作っているのですが、selectボックスを選択した場合が取れません。
2
2
 
3
+
4
+
3
5
  正常に動作動作する場合はselectで選択を行うと select 要素で change イベントが発生したときにdisabled = falseにならないといけません。
4
6
 
5
7
  途中まで制作中のサンプル
6
8
 
7
- ※こちらもselectが複数の場合ができません
9
+ ※こちらも一つのselectしか取れません
8
10
 
9
11
  ```ここに言語を入力
10
12
 

1

修正

2021/10/23 06:47

投稿

KKsall
KKsall

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,9 +1,85 @@
1
1
  jsでフォームに何か入力があればdisabledが解除されるjsを作っているのですが、selectボックスを選択した場合が取れません。
2
2
 
3
-
3
+ 正常に動作動作する場合はselectで選択を行うと select 要素で change イベントが発生したときにdisabled = falseにならないといけません。
4
+
5
+ 途中まで制作中のサンプル
6
+
7
+ ※こちらもselectが複数の場合ができません
4
8
 
5
9
  ```ここに言語を入力
6
10
 
11
+
12
+
13
+ <label for="fruit">選択してください</label>
14
+
15
+ <select class="fruit">
16
+
17
+ <option value="orange">Orange</option>
18
+
19
+ <option value="lemon">Lemon</option>
20
+
21
+ <option value="strawberry">Strawberry</option>
22
+
23
+ <option value="app">app</option>
24
+
25
+ </select>
26
+
27
+
28
+
29
+
30
+
31
+ <label for="fruit">選択してください</label>
32
+
33
+ <select class="fruit">
34
+
35
+ <option value="oranges">Oranges</option>
36
+
37
+ <option value="lemons">Lemons</option>
38
+
39
+ <option value="strawberrys">Strawberrys</option>
40
+
41
+ </select>
42
+
43
+ ```
44
+
45
+ ```ここに言語を入力
46
+
47
+ let fruitSelect = document.querySelector('.fruit');
48
+
49
+ fruitSelect.addEventListener('change', valueChange);
50
+
51
+
52
+
53
+ function valueChange(){
54
+
55
+ let selectOptions = fruitSelect.selectedOptions;
56
+
57
+ console.log('新しく ' + fruitSelect.value + ' を選択しました');
58
+
59
+ for (let i = 0 ; i < selectOptions.length ; i++){
60
+
61
+ //console.log(selectOptions[i].value);
62
+
63
+ button.disabled = false;
64
+
65
+ button.classList.remove('js-button');
66
+
67
+ }
68
+
69
+ }
70
+
71
+ ```
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+ ```ここに言語を入力
82
+
7
83
  <div class="col-9">
8
84
 
9
85
  <input type="text" class="form-control" id="inputtext5" placeholder="">