電卓のボタンイベントの処理を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); // 無名関数による引数渡し
}
});
コメント