質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1357閲覧

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

asako1010

総合スコア50

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/01 05:59

編集2019/12/01 07:08

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

現在の状態が以下の画像の通りです。
イメージ説明

追加ボタンを押したときに、「付番」と「作業中」の間にフォームに入力したテキストを挿入させたいのですが、反映されません。
反映されない理由は「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); 23comment = 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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

たとえば、

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

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

投稿2019/12/01 07:49

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

JavaScript

1comment = document.getElementById(id_text.value); 23comment = document.getElementById('id_text').value;

投稿2019/12/01 06:37

編集2019/12/01 07:10
Takumiboo

総合スコア2534

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asako1010

2019/12/01 07:09

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

2019/12/01 07:11

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

2019/12/01 07:23

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問