jQuary,javascript学習4(jQueryのchangeと関数)

・目次

jQuary,javascript学習4(jQueryのchangeと関数)

1.目的

　・jQuaryのchangeについて記載する。

　・関数を作成し、changeで実行する。

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

// jQueryの記述方法(changeで無名関数を実行) 
    $("#id名").change(function(){
// JQueryの記述方法(changeで関数を実行)
    $("#id名").change(関数名);

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

例：

　//Num2変化時、無名関数を実行
  $("#Num2").change(function(){    

　//Num2変化時、Calcdoubleという名前の関数を実行
  $("#Num2").change(Calcdouble);

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

<!--   
　　　　目的：Javascriptの基礎を作成する。
        NUM入力に入っている数値が変化したら、その2倍の値を計算結果に表示する。
        jQueryのchangeを使用し、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>
	
	<script>
	//ページ読み込み完了後、javascriptを実行
	window.onload = function () {
	
	//HTML要素を読み込んでからjQueryを実行
	$(function() {
	
		//Num変化時に、コンソールに、testを表示(無名関数の実行)
		$("#Num2").change(function(){
			console.log("test");//コンソールにtestを表示
		});
		
		// NUM変化時にCalcdouble関数を実行
		$("#Num2").change(Calcdouble);
		
/**	************************************************************** */
/**
 *	2倍にする関数
 *	@param	num		: 数値
 *	@return			: 2倍の値
 */
/**	************************************************************** */
		function Calcdouble(){
			//変数宣言
			let lnum2;
			//Num2の値を取得
			lnum2 = $("#Num2").val();
			//2倍の値を表示
			$("#ans2").val(2*lnum2);
		}
	});
	}
	</script>
  </body>
</html>