はじめに

目次

JavaScriptで計算フォームを作る

今回、まずは簡単に「2つの値を取る足し算」の計算フォームを作ってみます。

計算フォームを作る場合のJavaScriptの処理の流れを簡単に説明すると以下のとおりです。

HTMLとJavaScriptのソースは以下のとおりです。

CSSも記述するとページが長くなるので割愛しています

HTML

<form>
	<dl class="p-card">
		<dt class="p-card_dt"><input type="text" id="math01_01" class="p-input_text"><span class="p-text_plus">+</span><input type="text" id="math01_02" class="p-input_text"></dt>
		<dd class="p-card_button"><input id="btn01" class="p-input_button" type="button" value="計算"></dd>
		<dd class="p-card_content">答えは<span id="result01" class="p-span_result"></span>です</dd>
	</dl>
</form>

JavaScript

<script>
	let value01_01 = document.getElementById('math01_01');
	let value01_02 = document.getElementById('math01_02');
	document.getElementById('btn01').addEventListener('click',function() {
		var result01 = parseInt(value01_01.value)  + parseInt(value01_02.value) ;
		document.getElementById('result01').textContent = result01;
	});
</script>

簡単に説明すると、「2つのテキストボックスの値を整数に変換し、ボタンを押したら値の合計（和）をテキストとして出力する」よう設定しています。

今回使用した主なメソッド等はこちらです

できあがったもの

これで計算フォームはできましたが、「計算」ボタンを押すがちょっと面倒に感じたので、ボタンを押さなくても計算できるようにJavaScriptを変更してみます。

ボタンを押さなくても計算できるようにする

HTMLに関しては内容は全く同じですが、JavaScriptがソース中のIDを取得するように設定してるので、ID名のみ変更しています。

先ほどはaddEventListener('click')と設定しているため、クリックをした時にイベントが発生する（数値が出力される）ようになっています。

イベントリスナーをkeyupに設定するとクリックをしなくても数値を出力できるようになります。

addEventListenerで設定できるイベントはclickやkeyup以外にも以下のような物があります（これ以外にもあります）。

JavaScriptのソースは以下のとおりです。

JavaScript

<script>
	let value02_01 = document.getElementById('math02_01');
	let value02_02 = document.getElementById('math02_02');
	document.addEventListener('keyup',function() { //この行を変更
		var result02 = parseInt(value02_01.value)  + parseInt(value02_02.value) ;
		document.getElementById('result02').textContent = result02;
	});
</script>

できあがったもの

フォームに2つの値を入れると自動的に計算できるようになりましたが、未入力の場合「NaN」というテキストが出力されるようになってしまいました。

見栄えが悪いので、今度は「NaN」が表示されなくなるように変更してみます。

「NaN」を表示しないようにする

そもそも「NaN」とは「Not a Number」の略で、「数値ではない（非数）」という意味です。

つまり、今回の場合だと「本来、足し算の結果としての数値が取得されるはずなのに、『何も無い値』が取得された事によって出力された値」になります。

それでは、この「NaN」を出力させないようにする方法ですが、流れとしては以下になります。

値がNaNかそうで無いかを判定するにはNumber.isNaNcodeメソッドを使用します。

Number.isNaNcodeにif構文を組み合わせたJavaScriptは以下のとおりです。

JavaScript

<script>
	let value03_01 = document.getElementById('math03_01');
	let value03_02 = document.getElementById('math03_02');
	document.addEventListener('keyup',function() {
		var result = parseInt(value03_01.value)  + parseInt(value03_02.value) ;
		if(Number.isNaN(result) ) {
			document.getElementById('result03').textContent = '';
			console.log(result);
		} else {
			document.getElementById('result03').textContent = result;
		}
	});
</script>

できあがったもの

これで「NaN」が出力されなくなりました。

この計算フォームのスクリプトを応用して、PFCバランスの目標値を調べる計算フォームを作ってみましたので、参考までにどうぞ。

• 関連記事
• PFCバランスの目標値を調べる計算フォームを作りました
• https://www.ws-pilgrimage.jp/hobby/5675/