質問編集履歴

7

文法の修正。

2019/11/27 13:25

投稿

asako1010
asako1010

スコア50

test CHANGED
File without changes
test CHANGED
@@ -173,3 +173,83 @@
173
173
  </html>
174
174
 
175
175
  ```
176
+
177
+
178
+
179
+
180
+
181
+ 以下、解決したコード。
182
+
183
+ ```index.html
184
+
185
+ <!DOCTYPE html>
186
+
187
+ <html lang="ja">
188
+
189
+ <head>
190
+
191
+ <meta charset="UTF-8">
192
+
193
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
194
+
195
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
196
+
197
+ <title>ToDoリスト</title>
198
+
199
+
200
+
201
+ </head>
202
+
203
+ <body>
204
+
205
+ <h1>ToDoリスト</h1>
206
+
207
+ <label><input type="radio" name="phone">すべて</label>
208
+
209
+ <label><input type="radio" name="phone" >作業中</label>
210
+
211
+ <label><input type="radio" name="phone">完了中</label>
212
+
213
+ <h3>IDコメント 状態</h3>
214
+
215
+ <h2>新規タスクの追加</h2>
216
+
217
+
218
+
219
+ <p>
220
+
221
+ <input type="text" id="id_text" value="">
222
+
223
+ <button id="btn" type="btn"> 追加</button>
224
+
225
+ </p>
226
+
227
+
228
+
229
+
230
+
231
+ <script>
232
+
233
+
234
+
235
+ const btn = document.getElementById('btn');
236
+
237
+ btn.addEventListener('click', () => {
238
+
239
+ const text = document.getElementById('id_text').value;
240
+
241
+ console.log(text);
242
+
243
+ });
244
+
245
+
246
+
247
+ </script>
248
+
249
+
250
+
251
+ </body>
252
+
253
+ </html>
254
+
255
+ ```

6

文法の修正

2019/11/27 13:25

投稿

asako1010
asako1010

スコア50

test CHANGED
@@ -1 +1 @@
1
- console.log反映ない理由が分かりません。
1
+ フォームの取得うまく機能しません。
test CHANGED
File without changes

5

文法の修正。

2019/11/27 13:09

投稿

asako1010
asako1010

スコア50

test CHANGED
File without changes
test CHANGED
@@ -150,7 +150,7 @@
150
150
 
151
151
  const btn = document.getElementById('btn');
152
152
 
153
- const text = document.getElementById('id_text');
153
+ const text = document.getElementById('id_text').value;
154
154
 
155
155
 
156
156
 

4

文法の修正。

2019/11/27 10:32

投稿

asako1010
asako1010

スコア50

test CHANGED
File without changes
test CHANGED
@@ -88,6 +88,12 @@
88
88
 
89
89
  以下の通り、変更するも、フォームに文字入力すると、「<input type=​"text" id=​"id_text" value>」とコードがそのまま出力されてしまいます。
90
90
 
91
+ 以下のgetElementByIdに関する似た事例の記事を発見するも解決できません。
92
+
93
+ [リンク内容](https://www.sejuku.net/blog/27019)
94
+
95
+
96
+
91
97
 
92
98
 
93
99
  ```html.index

3

文法の修正。

2019/11/27 09:39

投稿

asako1010
asako1010

スコア50

test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
 
88
88
 
89
- 以下の通り、変更するも、フォームに文字入力すると、「<input type=​"text" id=​"id_text" value>」とコードがそのまま出力されてしま
89
+ 以下の通り、変更するも、フォームに文字入力すると、「<input type=​"text" id=​"id_text" value>」とコードがそのまま出力されてしまいます
90
90
 
91
91
 
92
92
 

2

文法の修正。

2019/11/27 09:37

投稿

asako1010
asako1010

スコア50

test CHANGED
File without changes
test CHANGED
@@ -81,3 +81,89 @@
81
81
  </html>
82
82
 
83
83
  ```
84
+
85
+
86
+
87
+
88
+
89
+ 以下の通り、変更するも、フォームに文字入力すると、「<input type=​"text" id=​"id_text" value>」とコードがそのまま出力されてしまう。
90
+
91
+
92
+
93
+ ```html.index
94
+
95
+ <!DOCTYPE html>
96
+
97
+ <html lang="ja">
98
+
99
+ <head>
100
+
101
+ <meta charset="UTF-8">
102
+
103
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
104
+
105
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
106
+
107
+ <title>ToDoリスト</title>
108
+
109
+
110
+
111
+ </head>
112
+
113
+ <body>
114
+
115
+ <h1>ToDoリスト</h1>
116
+
117
+ <label><input type="radio" name="phone">すべて</label>
118
+
119
+ <label><input type="radio" name="phone" >作業中</label>
120
+
121
+ <label><input type="radio" name="phone">完了中</label>
122
+
123
+ <h3>IDコメント 状態</h3>
124
+
125
+ <h2>新規タスクの追加</h2>
126
+
127
+
128
+
129
+ <form name="form" id="id_form" action="">
130
+
131
+ <input type="text" id="id_text" value="">
132
+
133
+ <button id="btn" type="button"> 追加</button>
134
+
135
+ </form>
136
+
137
+
138
+
139
+
140
+
141
+ <script>
142
+
143
+
144
+
145
+ const btn = document.getElementById('btn');
146
+
147
+ const text = document.getElementById('id_text');
148
+
149
+
150
+
151
+
152
+
153
+ btn.addEventListener('click', () => {
154
+
155
+ console.log(text);
156
+
157
+ });
158
+
159
+
160
+
161
+ </script>
162
+
163
+
164
+
165
+ </body>
166
+
167
+ </html>
168
+
169
+ ```

1

補足。

2019/11/27 09:37

投稿

asako1010
asako1010

スコア50

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,10 @@
1
1
  フォームに入力した文や数字をconsole.logに反映させたいのですが、うまくいきません。
2
2
 
3
3
  ググって、他の事例と照らし合わせて、原因を突き止めようとしたのですが、見つけることが出来ません。
4
+
5
+
6
+
7
+ 使用しているブラウザは「Google Chrome」です。
4
8
 
5
9
 
6
10