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

JavaScript

こんにちはtakosanです。

今回は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);
}

この中で、1行目の

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」を押すと、ちゃんと現在入力されている文字列を取得することができるはずです。

まとめ

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

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

ではよいWebライフを。

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