フォームの取得がうまく機能しません。

フォームに入力した文や数字をconsole.logに反映させたいのですが、うまくいきません。
ググって、他の事例と照らし合わせて、原因を突き止めようとしたのですが、見つけることが出来ません。

使用しているブラウザは「Google Chrome」です。

html.index
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
9</head>
10<body>
11<h1>ToDoリスト</h1>
12  <label><input type="radio" name="phone">すべて</label>
13  <label><input type="radio" name="phone" >作業中</label>
14  <label><input type="radio" name="phone">完了中</label>
15  <h3>IDコメント　状態</h3>
16  <h2>新規タスクの追加</h2>
17
18  <form name="form" id="id_form" action="">
19      <input type="text" id="id_text" value=""> 
20      <button id="btn"> 追加</button>
21  </form>
22
23  <script>
24  
25    const btn = document.getElementById('btn');
26    const text = document.getElementById('text');
27   
28      btn.addEventListener('click', () => {   
29      console.log(id_text); 
30    });
31  
32  </script>
33
34</body>
35</html>

以下の通り、変更するも、フォームに文字入力すると、「<input type="text" id="id_text" value>」とコードがそのまま出力されてしまいます。
以下のgetElementByIdに関する似た事例の記事を発見するも解決できません。
リンク内容

html.index
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
9</head>
10<body>
11<h1>ToDoリスト</h1>
12  <label><input type="radio" name="phone">すべて</label>
13  <label><input type="radio" name="phone" >作業中</label>
14  <label><input type="radio" name="phone">完了中</label>
15  <h3>IDコメント　状態</h3>
16  <h2>新規タスクの追加</h2>
17
18  <form name="form" id="id_form" action="">
19      <input type="text" id="id_text" value=""> 
20      <button id="btn" type="button"> 追加</button>
21  </form>
22 
23
24  <script>
25  
26    const btn = document.getElementById('btn');
27    const text = document.getElementById('id_text').value;
28    
29   
30      btn.addEventListener('click', () => {   
31      console.log(text); 
32    });
33  
34  </script>
35
36</body>
37</html>

以下、解決したコード。

index.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
9</head>
10<body>
11<h1>ToDoリスト</h1>
12  <label><input type="radio" name="phone">すべて</label>
13  <label><input type="radio" name="phone" >作業中</label>
14  <label><input type="radio" name="phone">完了中</label>
15  <h3>IDコメント　状態</h3>
16  <h2>新規タスクの追加</h2>
17
18  <p>
19      <input type="text" id="id_text" value=""> 
20      <button id="btn" type="btn"> 追加</button>
21  </p>
22 
23
24  <script>
25
26    const btn = document.getElementById('btn');
27    btn.addEventListener('click', () => { 
28      const text = document.getElementById('id_text').value;
29      console.log(text); 
30    });
31
32  </script>
33
34</body>
35</html>

退会済みユーザー

2019/11/27 08:23

ブラウザは何を利用していますか？

azuapricot

2019/11/27 08:26

ディベロッパーツール（F12をおしたやつ）は使ってないのでしょうか？

asako1010

2019/11/27 08:45

ブラウザはGoogle Chromeを使っています。

asako1010

2019/11/27 08:46

ディベロッパーツール使用しております。

date

2019/11/27 09:39

javascript使うの初めてですか?

asako1010

2019/11/27 09:42

はい。そうです。

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

回答2件

<button id="btn">とだけしていると、type="submit"とみなされます。そのため、このボタンはフォームを送信するものとみなされ、console.logが出たとしてもそのままページ遷移して結果は消えてしまいます。

<button id="btn" type="button">としておきましょう。

投稿2019/11/27 08:24

maisumakun

総合スコア145963

maisumakun

2019/11/27 08:25

それ以外に、「document.getElementById('text')」は見つからないですし、「id_text」という変数の定義もないですね。

asako1010

2019/11/27 09:30

ありがとうございます。修正します。

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

ベストアンサー

js
1   const btn = document.getElementById('btn');
2// const text = document.getElementById('id_text').value;
3//        ↑ ここで取得しても、ページが読み込まれた時の値しか持っていない
4   btn.addEventListener( 'click', () => {   
5      const text = document.getElementById('id_text').value;
6      console.log( text ); 
7   } );