フォームに入力したテキストの挿入が上手くいかない

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

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

追加ボタンを押したときに、「付番」と「作業中」の間にフォームに入力したテキストを挿入させたいのですが、反映されません。
反映されない理由は「commentEl.textContent = comment;」らへんに変更する必要があると、アタリをつけているのですが調べても改善方法が分かりません。

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>

【追記】

HTML
1comment = document.getElementById(id_text.value);
2↓
3comment = document.getElementById(id_text).value;

上記の変更を加えてもTypeError: Cannot read property 'value' of null
と表示されてしまいます。
なぜnullになるのでしょうか？

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>

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

回答2件

改善方法が分かりません。

最良の改善方法 は学んだ基礎を 徹底的に確認する ことです。

たとえば、

HTML属性 の書き方に書き間違いがないか。（attr="value" の書式で統一できているか）
関数の引数 に間違いはないか。（createElement(), getElementById() など）
プロパティの使い方 に間違いはないか

日常生活での簡単な足し算や引き算も、急いで暗算すると間違えてしまう。
そんな現象と同じことが、コードを書いている最中にも起こります。
何度でも、つぶさに確認してみましょう。

投稿2019/12/01 07:49

AkitoshiManabe

総合スコア5434

ベストアンサー

JavaScript
1comment = document.getElementById(id_text.value);
2↓
3comment = document.getElementById('id_text').value;

投稿2019/12/01 06:37

編集2019/12/01 07:10

Takumiboo

総合スコア2536

asako1010

2019/12/01 07:09

ありがとうございます。書き忘れていましたが「.value」の位置を変更しても、フォームに入力できませんでした。 nullと表示されてしまいます。

Takumiboo

2019/12/01 07:11

すみません、タイプミスをしていました。id名は文字列なので、クォーテーションで囲う必要があります。

asako1010

2019/12/01 07:23

ありがとうございます。クォーテーションつけると解決できました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

フォームに入力したテキストの挿入が上手くいかない

関連した質問