JS:電卓プログラムの別解

JavaScript

電卓のボタンイベントの処理をJavaScript側に記述した。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>dentaku</title>
	<script src="main.js"></script>
</head>
<body>
	<div id="frame">
		<input type="text" value="0" id="display">
		<div id="button_form">
			<input type="button" value="C" class="calc">
			<input type="button" value="Tax" class="calc">
			<input type="button" value="+/-" class="calc">
			<input type="button" value="/" class="calc"><br>

			<input type="button" value="7" class="calc">
			<input type="button" value="8" class="calc">
			<input type="button" value="9" class="calc">
			<input type="button" value="*" class="calc"><br>

			<input type="button" value="4" class="calc">
			<input type="button" value="5" class="calc">
			<input type="button" value="6" class="calc">
			<input type="button" value="-" class="calc"><br>

			<input type="button" value="1" class="calc">
			<input type="button" value="2" class="calc">
			<input type="button" value="3" class="calc">
			<input type="button" value="+" class="calc"><br>

			<input type="button" value="0" class="calc">
			<input type="button" value="." class="calc">
			<input type="button" value="BS" class="calc">
			<input type="button" value="=" class="calc">
		</div>
	</div>
</body>
</html>

main.js

// 電卓アプリ(addEventListener使用)

let display = null;		// 電卓表示部分
const ZEI = 1.1;		// 消費税率

// 計算処理
const calc = (e)=>{
	// ボタンのテキストを取得
	let value = e.value;
	console.log(this);

	// 表示が「0」の時は情報を消去
	if(display.value === "0"){
		display.value = "";
	}

	let text = "";
	// ボタンによる処理
	if(value === "C"){					// クリア
		display.value = "0";
	}
	else if(value === "BS"){				// 一文字消す
		text = display.value;
		let bsText = text.substring(0, text.length - 1);
		if(bsText === "") bsText = "0";
		display.value = bsText;
	}
	else if(value === "+/-"){			// +/-の変換
		text = display.value;
		if(text === ""){
			text = "0";
		}
		else if(text.charAt(0) === "-"){
			text = text.substring(1);
		}
		else{
			text = "-" + text;
		}
		display.value = text;
	}
	else if(value === "Tax"){			// 税込価格
		let siki = display.value;
		if(siki === "") siki = "0";
		try{
			let kotae = Math.round(eval(siki) * ZEI);
			display.value = kotae;
		} catch(e){
			alert("税込計算できないよ!: " + e.message);
		}
	}
	else if(value === "="){				// 計算する
		let siki = display.value;
		console.log(siki);
		try{
			let kotae = eval(siki);
			display.value = kotae;
		} catch(e){
			alert("式が変だよ!: " + e.message);
		}
	}
	else{							// 文字をつなげる
		display.value += value;
	}
};

/**
 * 起動時の処理
 */
window.addEventListener("load", ()=>{
	display = document.getElementById("display");
	display.value = "0";

	// 電卓ボタンのイベント設定
	const buttons = document.getElementsByClassName("calc");

	for(let button of buttons){
		button.addEventListener("click", function(){ calc(this);}, false);	// 無名関数による引数渡し
	}
});

コメント