こんにちは、Reiです！
前回のステップで、
「ボタンが押されたら処理を実行する」という土台ができました。
今回はその続きとして、
入力欄に入力された文字を取得して扱えるようにしていきます！
入力欄の文字を取得する
ここでは、入力欄に書かれた文字を
JavaScriptで読み取る処理を実装していきます。
さらに、取得したあとに
入力欄を空にリセットする処理も追加していきます。
この仕組みができると、
・ユーザーが入力した内容を取得する
・取得した内容を別の処理で使う
といった、アプリの基本的な動きが実現できます。
ポイントは、入力欄から取得した値は、変数に保存される という点です。
そのため、入力欄を空にしても、取得したデータは問題なく使えます。
それでは、順番に実装していきましょう！
1. HTMLの入力欄に「目印」をつける
まずは、JavaScriptが
どの入力欄の文字を読み取ればよいのか を判断できるようにします。
そのために、<input> タグに id を付けます。
【編集ファイル：index.html】
<input id="add-text" placeholder="TODOを入力" />ボタンと同じように、
入力欄にも id を付けておくことで、
JavaScriptから
「この入力欄の文字を取得する」
というように、対象を正確に指定できるようになります。
2. テキストボックスの中身を取得する
次に、ボタンが押されたときに実行されるonClickAdd の中身を書き換えます。
入力欄に書かれた文字を
JavaScriptで読み取れるようにしてみましょう。
【編集ファイル：src/index.js】
const onClickAdd = () => {
// 1. HTMLから入力欄の要素を取得し、その値を取り出す
const inputText = document.getElementById("add-text").value;
alert(inputText);
};- .value
入力欄などのフォーム要素が持っている 「現在の値」 を取得するプロパティです。getElementByIdで取得した入力欄に対して.valueを指定すると、
その入力欄に現在書かれている 文字データ を取り出すことができます
取得した文字は、const inputText という定数に保存しています。
このように一度変数へ保存しておくことで、
取得したデータを あとから別の処理で使える状態 にしておくことができます。
3. テキストボックスの中身を空にする
次に、文字を読み取ったあと
入力欄を空にリセットする処理 を追加します。
【編集ファイル：src/index.js】
const onClickAdd = () => {
// 1. テキストボックスの値を取得
const inputText = document.getElementById("add-text").value;
// 2. テキストボックスの中身を空にする
document.getElementById("add-text").value = "";
alert(inputText);
};ここでは、.value = "" とすることで、
入力欄の値を 空の文字 に置き換えています。
文字を取得した直後に入力欄をクリアしておくことで、
- ユーザーが次のTODOをすぐ入力できる
- 以前の文字を消す手間がなくなる
という、使いやすい状態を保つことができます。
今回の処理の流れ
ここまでのコードでは、
ボタンがクリックされると、次のような順番で処理が動きます。
- テキストボックスから文字を読み取る
- 入力欄の中身を空にする
- 保存しておいた文字をアラートで表示する
ポイントは、
画面の入力欄を空にしても、取得した文字は消えない という点です。
最初に入力された文字を inputText という変数に保存しているため、
そのあと入力欄を空にしても、取得した文字はその変数の中に残っています。
そのため、入力欄が空になったあとでも、
保存しておいた文字を alert で表示することができます。
全体像の確認
最終的に、以下のようになっていればOKです。
- index.html
入力欄にid="add-text"が付与されている - src/index.js
入力値の取得と、入力欄を空にする処理がonClickAddの中に書かれている
このように、
入力を受け取る → すぐリセットする
という流れにしておくことで、
ユーザーは常に 空の入力欄から次のTODOを書き始める ことができます。
一見シンプルな処理ですが、
アプリの使いやすさを支える大切なポイントとなります！
【完成ファイル：index.html】
〜省略〜
<body>
<div class="input-area">
<input id="add-text" placeholder="TODOを入力">
<button id="add-button">追加</button>
</div>
〜省略〜【完成ファイル：src/index.js】
/**
* 追加ボタンが押された時に実行する関数
*/
const onClickAdd = () => {
// 1. テキストボックスの値を取得
const inputText = document.getElementById("add-text").value;
// 2. テキストボックスの中身を空にする
document.getElementById("add-text").value = "";
alert(inputText);
};
// 追加ボタンの要素を取得
const addButton = document.getElementById("add-button");
// ボタンがクリックされたら onClickAdd を実行
addButton.addEventListener("click", onClickAdd);
まとめ
今回は、JavaScriptを使って
「入力された文字を読み取り、入力欄をリセットする」 処理を実装しました。
＼＼ 今回のまとめ ／／
・ id を付けて、JavaScriptから入力欄を特定する
・ .value を使って入力された文字を取得する
・ 取得後に 空文字（””）を代入して入力欄をリセットする
これで、ユーザーが入力した内容をJavaScriptが読み取る という仕組みができました。
次はいよいよ、
読み取った文字をTODOリスト（未完了エリア）に追加する
という、アプリのメイン機能を実装していきます！
コメント