ページ上でjQueryによる計算


某サイトに載せようと思う内容をここに記載。
inputタグに数値を入力し、javascriptを用いて計算結果を表示させる。

Javascript

$(function(){
	$( ".num" ).change(function(){
		$( "#ans01" ).text( Number( $( "#num01" ).val() ) + Number( $( "#num02" ).val() ) );
		$( "#ans02" ).text( Number( $( "#num03" ).val() ) - Number( $( "#num04" ).val() ) );
		$( "#ans03" ).text( Number( $( "#num05" ).val() ) * Number( $( "#num06" ).val() ) );
		if( Number( $( "#num08" ).val() ) == 0 ){
			$( "#ans04" ).text( "無限大" );
		}else{
			$( "#ans04" ).text( Number( $( "#num07" ).val() ) / Number( $( "#num08" ).val() ) );
		}
	});
});

HTML

<form>
<p><input type="text" value="0" id="num01" class="num"> + <input type="text" value="0" id="num02" class="num"> = <span id="ans01"></span></p>
<p><input type="text" value="0" id="num03" class="num"> - <input type="text" value="0" id="num04" class="num"> = <span id="ans02"></span></p>
<p><input type="text" value="0" id="num05" class="num"> * <input type="text" value="0" id="num06" class="num"> = <span id="ans03"></span></p>
<p><input type="text" value="0" id="num07" class="num"> / <input type="text" value="1" id="num08" class="num"> = <span id="ans04"></span></p>
</form>