入力された文字を受け取る

<input>に書かれた文字をJavaScriptで受け取れると、ページは一気に「反応するもの」になります。使うのはvalueというたった1つの言葉です。

textContentではなくvalue

文字を書きかえる回ではtextContentを使いました。入力欄は少し違います。

入力欄の中身はHTMLに書かれた文字ではなく、ユーザーがいま打った内容だからです。

<input type="text" id="name">
<button id="greet">あいさつする</button>
<p id="message"></p>

const input = document.querySelector("#name");
console.log(input.value);

これで、入力欄に書かれている文字がコンソールに出ます。何も書かれていなければ、空っぽの文字（""）が返ります。

ボタンを押したときに受け取る

値は「押された瞬間」に読むのがポイントです。

const input = document.querySelector("#name");
const message = document.querySelector("#message");

document.querySelector("#greet").addEventListener("click", function () {
  message.textContent = input.value + "さん、こんにちは！";
});

空っぽのときの対処

何も入力されていないと「さん、こんにちは！」という妙な表示になります。先に確かめて、その場合は止めましょう。

const name = input.value.trim();

if (name === "") {
  message.textContent = "なまえを入れてください";
  return;
}

message.textContent = name + "さん、こんにちは！";

• .trim()——前後の空白を取り除く。スペースだけの入力も空として扱える
• return——ここで処理を打ち切る。「これ以上は進めない」の合図

数字を入れてもらったとき

ここは全員がつまずきます。valueで取れる値は、数字を打っても文字として扱われます。

const age = input.value;   // 「3」と入力した場合 → 文字の "3"
console.log(age + 1);      // 「31」になってしまう

文字どうしの+は連結なので、"3" + 1は"31"。計算したいときはNumber()で数に変換します。

const age = Number(input.value);
console.log(age + 1);      // 4

送信ボタンで受け取るとき

<form>の中のボタンで受け取るときは、ページが再読みこみされるのを止める1行を足します。

document.querySelector("form").addEventListener("submit", function (event) {
  event.preventDefault();
  message.textContent = input.value + "さん、ありがとう！";
});

event.preventDefault()が、フォーム本来の「送信して画面を切りかえる」動きを止める合図です。

このレッスンのまとめ

1. 入力欄の中身はvalueで取り出す（textContentではない）
2. 値を読むのはイベントが起きた中で。外で1回読むと空のままになる
3. 数として計算したいときはNumber()で変換する