More than 3 years have passed since last update.

[JavaScript]input要素に入力した場所によって対応した場所に出力をする

Posted at 2020-01-15

メモ

開発メモ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<title>練習</title>
</head>
<body>
	<input name="kanso" id = "num_1" rows="1" cols="10"></input>
	<input name="kanso" id = "num_2" rows="1" cols="10"></input>
	<p id="result_1"></p>
	<p id="result_2"></p>
</body>
<script>
	$("[id^=num_]").change(function () {
		let value = $(this).val(); // 値を取得
		let id = $(this).attr('id'); // id取得
		// idによってresult_{id}に値を入れる
		let res = id.replace(/[^0-9]/g, ''); // idの数字の部分のみを取得
		let result_id = "result_" + res; // 取得した数字でidを生成
		var result = document.getElementById(result_id); // 生成したidの要素を取得
		result.innerHTML = value ? value * 100 : ''; // 取得した要素に値を入れる（入力がない場合は空）
	});
</script>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up