テキストボックスに入力した値を取得し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
コメント