フォームに入力したテキストを反映させたい

課題
上記の課題を作っている最中です。

現在の状態が以下の画像の通りです。

追加ボタンを押したときに、「0」と作業中の間にフォームに入力したテキストを反映したいのですが、反映されません。
反映されない理由は「commentEl.textContent = comment;」で文章（テキスト）しか取れないのにもかかわらず、textContentを使っているから反映されないのかと思うのですが、どう改善すればいいのかが分かりません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14<div class="radiobutton">
15    <input type="radio" id="button-1" name="radio1" value="1" checked />
16    <label for="button-1">すべて</label>
17    <input type="radio" id="button-2" name="radio1" value="2" />
18    <label for="button-2">完了中</label>
19    <input type="radio" id="button-3" name="radio1" value="3" />
20    <label for="button-3">作業中</label>
21
22
23    <h3 id="id_h3">ID コメント 状態</h3>
24    <div id="todo"></div>
25    <h2>新規タスクの増加</h2>
26        
27    <p id = id_p>
28        <input type="text" id="id_text" value=""> 
29        <button id="btn" type="btn" class="button"> 追加</button>
30    </p>
31    </div>
32
33    <script>
34    const id = 0;
35    const btn = document.getElementById('btn');
36    btn.addEventListener('click', () => { 
37
38      const idEl = document.createElement("span");
39      idEl.textContent = id;
40      const comment = document.getElementById(id_text);
41      const commentEl = document.createElement("span");
42      commentEl.textContent = comment;
43
44      const btn1El = document.createElement("button");
45      btn1El.textContent = "作業中";
46      const btn2El = document.createElement("button");
47      btn2El.textContent = "削除";
48
49      const divEl = document.createElement("div");
50      divEl.appendChild(idEl);
51      divEl.appendChild(commentEl);
52      divEl.appendChild(btn1El);
53      divEl.appendChild(btn2El);
54
55      const todoEl = document.getElementById("todo");
56      todoEl.appendChild(divEl);
57      id++;
58    }, false);
59      
60  </script>
61</body>
62</html>

CSS
1
2.button {
3  border-radius: 10px;
4}
5.button:hover {
6  background-color: #59b1eb;
7}
8.button:active {
9  top: 3px;
10  box-shadow: none;
11}
12
13
14.radiobutton label {
15	padding: 0 0 0 24px;	/* ラベルの位置 */
16	font-size: 16px;
17	line-height: 28px;		/* ボタンのサイズに合わせる */
18	display: inline-block;
19	cursor:	pointer;
20	position: relative;
21}
22.radiobutton label:before {
23	content: '';
24	width: 14px;		/* ボタンの横幅 */
25	height: 14px;		/* ボタンの縦幅 */
26	position: absolute;
27	top: 0;
28	left: 0;
29	background-color: rgb(0, 162, 255);
30	border-radius: 50%;
31}
32.radiobutton input[type="radio"] {
33	display: none;
34}
35.radiobutton input[type="radio"]:checked + label:after {
36	content: '';
37	width: 3px;		/* マークの横幅 */
38	height: 3px;		/* マークの縦幅 */
39	position: absolute;
40  top: 5.5px;
41	left: 5.5px;
42	background-color: #fff;
43	border-radius: 50%;
44}

以下、修正しました。
付番について解決できました。

ただ、「id_text.value」としたのですが、フォームに入力したテキストが出力されないのはなぜなのでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14<div class="radiobutton">
15    <input type="radio" id="button-1" name="radio1" value="1" checked />
16    <label for="button-1">すべて</label>
17    <input type="radio" id="button-2" name="radio1" value="2" />
18    <label for="button-2">完了中</label>
19    <input type="radio" id="button-3" name="radio1" value="3" />
20    <label for="button-3">作業中</label>
21
22
23    <h3 id="id_h3">ID コメント 状態</h3>
24    <div id="todo"></div>
25    <h2>新規タスクの増加</h2>
26        
27    <p id = id_p>
28        <input type="text" id="id_text" value=""> 
29        <button id="btn" type="btn" class="button"> 追加</button>
30    </p>
31    </div>
32
33    <script>
34    let id = 0;
35    const btn = document.getElementById('btn');
36    btn.addEventListener('click', () => { 
37
38      const idEl = document.createElement("span");
39      idEl.textContent = id;
40      const comment = document.getElementById(id_text.value);
41      const commentEl = document.createElement("span");
42      commentEl.textContent = (comment);
43
44      const btn1El = document.createElement("button");
45      btn1El.textContent = "作業中";
46      const btn2El = document.createElement("button");
47      btn2El.textContent = "削除";
48
49      const divEl = document.createElement("div");
50      divEl.appendChild(idEl);
51      divEl.appendChild(commentEl);
52      divEl.appendChild(btn1El);
53      divEl.appendChild(btn2El);      
54
55      const todoEl = document.getElementById("todo");
56      todoEl.appendChild(divEl);
57      id++;
58    }, false);
59      
60  </script>
61</body>
62</html>

m.ts10806

2019/11/30 09:11

なんですか？「目標物」って。自身や課題出した人しか分からない表現はしないようにしてください。見てるのは全て赤の他人です。

m.ts10806

2019/11/30 09:14

あとこれだけだと「どういうことをして」「どうなったら正解なのか」も誰も分かりません。仕様、要件をきちんと説明してください。

asako1010

2019/11/30 09:53

了解しました。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1const comment = document.getElementById(id_text);

id_textという変数はご提示のコードの中では定義されていません。
十中八九、文字列 'id_text' としたいのだと思いますが、万が一、提示されていないコード中で定義済みの変数であればご放念ください。
あと、inputに入力された値を取りたい場合はvalueでアクセスするのがよいでしょう。