jQuary,javascript学習3(数値の取得と出力)

・目次

jQuary,javascript学習3(数値の取得と出力)

1.目的

　・jQuaryを使用し、htmlの数値を取得し、計算結果を出力するする方法について記載する。

2.htmlの値の取得と値の出力方法

// JQueryの記述方法(数値の取得) 
    $("#id名").val();
// JQueryの記述方法(数値の変更、出力)   
    $("#id名").val(出力する変数名);

　・数値の取得及び、数値を出力する際には、valを使用する。

　参考：.val() | jQuery 1.9 日本語リファレンス | js STUDIO

例：

　//変数宣言
　let lnum2;				
　//Num2の値を取得
　lnum2 = $("#Num2").val();

　・Num2という名前のidの値をlnum2という変数に格納 (入力)

　//2倍の値を表示
　$("#ans2").val(lnum2);

　・ans2という名前のidの値をlnum2に変更する。 (出力)

3.プログラムの作成(数値の取得と、計算結果の出力)

<!--   
　　　　目的：Javascriptの基礎を作成する。
        計算実行のボタンを押したら、NUM入力に入っている数値の2倍の値を
        2倍の計算結果に表示する。
-->  
<!DOCTYPE html>
<html lang="ja">
  <head>
  	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2倍</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  
  <body>
	<p> NUM入力 <input type="text" size="15" value="300" id ="Num2"></p>
	<p> 2倍の計算結果 <input type="text" size="15"  id = "ans2"></p>
	<p> 計算実行  <input type="button" size="10"  id = "button"></p>
	
	<script>
		//変数宣言
		let lnum2;
				
		//ボタン押下時実行(取得したNumの値を2倍にして、出力)
		$("#button").click(function(){
			//Num2の値を取得
			lnum2 = $("#Num2").val();
			//2倍の値を表示
			$("#ans2").val(2*lnum2);
		})
	</script>
  </body>
</html>