javascriptでHTMLの数値取得

この記事では、HTMLで数値を設定し、その設定した値をjavascript側で取得する方法について記載する。

1. 目的

　・HTMLで数値を設定し、その設定した値をjavascript側で取得する方法について理解する。(下記を作成)

　・取得した値を使って、計算を行い、その計算結果を表示する。

javascriptでHTMLの数値取得

2. HTMLで数値の入力フォームと数値を設定する方法

<input type = "text" size="サイズ(数値)" value =数値" id = "id名">

例：

<input type="text" size="15" value="100" id ="R1">

　・inputタグ：　入力フォームの作成 (typeがtextの時)

　　参考：<input>: 入力欄（フォーム入力）要素 - HTML: ハイパーテキストマークアップ言語 | MDN

　・size　：　inputフォームのサイズを指定

　・value ：　初期の値を設定、又は文字列 (フォームの中にここに記載したものが表示)

　・id 　：　id名を設定

３. HTMLの数値をjavascriptで取得する。

 let 変数名　= parseInt(document.getElementById("id名").value);

例：

let lR1 = parseInt(document.getElementById("R1").value);

・parseInt　：文字列の引数を、指定された基数の整数値を返す。

　parseIntの詳細：parseInt() - JavaScript | MDN

・document.getElementById("id名").value ：指定したidのvalueの文字列を取得する。

3. プログラムの作成(数値の取得と足し算)

<!DOCTYPE html>
<html lang="ja">
  <head>
  	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>足し算</title>
  </head>
  
  <body>
	<p> R1入力 <input type="text" size="15" value="100" id ="R1"></p>
	<p> R2入力 <input type="text" size="15" value="200" id ="R2"></p>
	<p> 足し算結果 <input type="text" size="15"  id = "ans"></p>

	<script>
		//R1とR2の値を取得
		let lR1 = parseInt(document.getElementById("R1").value);
		let lR2 = parseInt(document.getElementById("R2").value);
		let lans = document.getElementById("ans");
	
		//足し算の結果をvalueに設定
		lans.value = lR1 + lR2;
	</script>
  </body>
</html>

実行結果

ーーーーーーーーーーーーーーー

R1入力

R2入力

足し算結果

ーーーーーーーーーーーーーーー

4. プログラムの作成(数値の取得と足し算、再計算ボタンの追加)

上記プログラムに、再計算のボタンを付け、再計算ボタンを押すと、フォームに値で、再計算するプログラムを作成する。

<!DOCTYPE html>
<html lang="ja">
  <head>
  	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>足し算</title>
  </head>
  
  <body>
	<p> Num1入力 <input type="text" size="15" value="100" id ="Num1"></p>
	<p> Num2入力 <input type="text" size="15" value="200" id ="Num2"></p>
	<p> 足し算結果 <input type="text" size="15"  id = "ans2"></p>
	<input type="button" value="再計算" id = "reans">

	<script>
		//Num1とNum2の値を取得
		let lnum1 = parseInt(document.getElementById("Num1").value);
		let lnum2 = parseInt(document.getElementById("Num2").value);
		let ans2 = document.getElementById("ans2");
		let reans = document.getElementById("reans");
	
		//足し算の結果をvalueに設定
		ans2.value = lnum1 + lnum2;
		
		//クリックを押すと、再計算を実行
		reans.addEventListener("click",function(){
			//Num1とNum2の値を再取得
			lnum1 = parseInt(document.getElementById("Num1").value);
			lnum2 = parseInt(document.getElementById("Num2").value);
			//計算結果をvalueに設定
			ans2.value = lnum1 + lnum2;
		})
	</script>
  </body>
</html>