【JavaScript】入力された文字列を取得する方法

今回はinput要素に入力された文字列を取得する方法を紹介します。

完成品コード

まずは完成品のコードを試してみてください。

適当に入力欄に文字列をいれて、「GET」ボタンを押すとalertで入力した文字列が表示されます。

See the Pen Untitled by yukiwebcreate (@Yukiwebcreate) on CodePen.

コードの解説

ここからは簡単にコードの解説をします。

まずはJSのコード全体はこちらです。

const btn = document.querySelector('.btn');
btn.onclick = function(){
  text= document.querySelector('.input').value;
  alert(text);
}

この中で、１行目の

const btn = document.querySelector('.btn');

は、「.btn」クラスを持つ要素を取得しています。

そして次の

btn.onclick = function(){
  text= document.querySelector('.input').value;
  alert(text);
}

では、上記で取得したbtnが押された時、

1.「.input」というクラス名のついたinput要素の値(つまりvalue）をtextとして取得して

2.alertで表示してください。

というプログラムになっています。

何度か入力しなおして「GET」を押すと、ちゃんと現在入力されている文字列を取得することができるはずです。

まとめ

なにかと入力文字列などを取得することや、その長さを計算したりすることは多いです。

覚えておいて損はないはずなので、ぜひ覚えておきましょうー。

おまけ：JavaScriptおすすめ書籍

Web制作者やフロントエンドエンジニアを目指すなら、こちらの書籍がオススメです。

こちらはWebクリエイターボックスのManaさんが書かれた書籍で、ポイントは以下のような感じです。

・JavaScriptの基本から実装まで必要なことがすべて学べる
・図解が充実していて読みやすい
・章立てや構成がよくできていてスムーズに読み進められる
・アニメーションやイベントの知識と技術がつまっている
・サンプルプログラムがWeb上からダウンロードできる（自分でコードを用意しなくて良い）

タイトルどおり、一冊でまるっと学べる書籍になっているので、初学者必携の一冊といってもいいでしょう。