テキストボックスに入力したデータの利用【JavaScript勉強ログ #12】

※本記事はJavaScriptの勉強がてら、自分達の学んだことを備忘録的に残しておくことが目的です。素人が四苦八苦しながらJavaScriptを学ぶ過程を楽しんでいただければ、そしてそれが、少しでも誰かのためになれば嬉しいです。
また、本記事は備忘録的にまとめていきますので、詳細までは書かないこともあります。ご了承を～

はじめに
テキストボックスに入力したデータの利用
最後に
参考書籍・Udemy

はじめに

さて今回は、テキストボックスに入力したデータを利用する方法についてまとめたいと思います。

以下画像のようなことをやりたいわけですね。

これまでは直接ソースコード上にテキストを入力していましたが、基本そんな使い方しませんよね？？皆さんがよくやるのは、Web上に表示されたテキストボックスに何かを入力すると、その内容を受けて処理が動くといったもののはずです。

そんな使い方を是非ともマスターしましょう。

※ちなみに、今回は色々とこれまでやっていない分けわからないことを実行しますが、別の機会でちゃんと説明するのでいったんは目をつぶって見ていただければと思います！

テキストボックスに入力したデータの利用

テキストボックスに入力された値を利用するためには、documentオブジェクトを利用しましょう！

★指定idのテキストボックスから入力されたデータを取得

var 変数 = document.getElementById(id名).value;

★ページ内の指定idタグへ文字列を挿入

var 変数 = document.getElementById(id名);

変数名.innerText = 挿入する文字列;

例は以下の通りです。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		名前を入力してください。
		<form name="form1" id="f1" action="#">
			<input name="textBox1" id="t1" type="text" value="" />
			<input type="button" value="入力"
				onclick="onButtonClick();" />
		</form>
		<hr/>
		<div id="output"></div>
		<script>
			function onButtonClick() {
				var name = document.forms.f1.t1.value;
				target = document.getElementById("output");
				target.innerText = name + "さん、はじめまして！";
			}
		</script>
	</body>
</html>

11行目に「onButtonClick();」があるかと思います。これは、16~20行目の処理を呼び出すための命令です。

16~20行目の処理では、「document」オブジェクトを利用してテキストボックスに入力されたデータを取得し、文字列を表示しています。

入力ボタンが押下されると処理がスタートします。

17行目でテキストボックスに入力されたデータを変数nameへ代入し、19行目でnameと「さん、はじめまして！」という文字列を結合させて表示しています。

テキストボックスに入力→データ取得→処理、といった一連のプロセスが実行されていることが分かりますね。