テキストボックスに入力した値を取得しConsole.logで出力する方法【JavaScript】

Web

テキストボックスに入力した値を取得しConsole.logで出力する方法についての備忘録。

Console.logでフォームの文字を反映させる方法

ToDoリストを作成中、かなり奮闘しました。

当初書いていたコードが以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ToDoリスト</title>

</head>
<body>
<h1>ToDoリスト</h1>
  <label><input type="radio" name="phone">すべて</label>
  <label><input type="radio" name="phone" >作業中</label>
  <label><input type="radio" name="phone">完了中</label>
  <h3>IDコメント 状態</h3>
  <h2>新規タスクの追加</h2>

  <form name="form" id="id_form" action="">
      <input type="text" id="id_text" value=""> 
      <button id="btn" type="button"> 追加</button>
  </form>


  <script>

    const btn = document.getElementById('btn');
    const text = document.getElementById('id_text').value;


      btn.addEventListener('click', () => {   
      console.log(text); 
    });

  </script>

</body>
</html>

const text = document.getElementById(‘id_text’).value;

の位置が間違っていました。

ここで取得しても、ページが読み込まれた時の値しか持っていないので、意味なし。

正しくは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ToDoリスト</title>

</head>
<body>
<h1>ToDoリスト</h1>
  <label><input type="radio" name="phone">すべて</label>
  <label><input type="radio" name="phone" >作業中</label>
  <label><input type="radio" name="phone">完了中</label>
  <h3>IDコメント 状態</h3>
  <h2>新規タスクの追加</h2>

  <p>
      <input type="text" id="id_text" value=""> 
      <button id="btn" type="btn"> 追加</button>
  </p>
 

  <script>

    const btn = document.getElementById('btn');
    btn.addEventListener('click', () => { 
      const text = document.getElementById('id_text').value;
      console.log(text); 
    });

  </script>

</body>
</html>

getElementByIdメソッドの使い方

getElementByIdの使い方は以下URLに載っていました。
https://www.sejuku.net/blog/27019

テキストボックスの入力フォームの取得方法

https://www.ipentec.com/document/javascript-get-textbox-value

要素の取得方法まとめ

https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4

コメント

タイトルとURLをコピーしました