うちの子供に学ばせるJavaScript教本（2）四則演算して計算機を作ろう

今日はJavaScriptで四則演算する計算機を作ろうと思います。
まずHTMLから。
数字を入力するボタンと、
四則演算のボタン、結果を表示するDivボックスを作ります。

<input type="text" id="keisan01">
<input type="text" id="keisan02">
<button onclick="keisan()">たす</button>
<button onclick="kakeru()">かける</button>
<button onclick="hiku()">ひく</button>
<button onclick="waru()">わる</button>
<div id="kekka"></div>

function名はkeisan()、kakeru()、hiku()、waru()と安直につけてしまいましょう。
また結果表示部分は id=”kekka”とします。

function keisan() {
	tasu = document.getElementById('keisan01');	
	tasareru = document.getElementById('keisan02');	

	x = parseInt(tasu.value);	
	y = parseInt(tasareru.value);	
	
	b = x + y;

	kekka.innerHTML = b;
}

function kakeru() {
	tasu = document.getElementById('keisan01');	
	tasareru = document.getElementById('keisan02');	

	x = parseInt(tasu.value);	
	y = parseInt(tasareru.value);	
	
	b = x * y;

	kekka.innerHTML = b;
}

function hiku() {
	tasu = document.getElementById('keisan01');	
	tasareru = document.getElementById('keisan02');	

	x = parseInt(tasu.value);	
	y = parseInt(tasareru.value);	
	
	b = x - y;

	kekka.innerHTML = b;
}

function waru() {
	tasu = document.getElementById('keisan01');	
	tasareru = document.getElementById('keisan02');	

	x = parseInt(tasu.value);	
	y = parseInt(tasareru.value);	
	
	b = x / y;

	kekka.innerHTML = b;
}

１つfunctionを作って後はコピーする方法を取ろうと思います。
document.getElementByIdでkeisan01、keisan02をそれぞれ変数に取り込みます。
割り算もあるので整数にするためparseInt関数を通し、x,yに格納します。
その後演算のため「b = x + y」として、
innerHTMLでDivボックス「kekka」に表示します。

以降はこのfunctionをコピーして、それぞれ演算子を変更します。

たす かける ひく わる

動いたら色々数字を変えて遊んで見ましょう！