JavaScriptで電卓を作って一応完成はした

質問

のですが、分からないコードがあります。以下のコードです。

～HTML～

<form name="dentaku">
<input type="text" name="line" value="0">
<input type="button" value="Ｃ" onclick="cl()">
<input type="button" value=" ７ " onclick="val(7)">
<input type="button" value=" ８ " onclick="val(8)">
<input type="button" value=" ９ " onclick="val(9)">
<input type="button" value="÷" onclick="keisan('/')">
<input type="button" value=" ４ " onclick="val(4)">
<input type="button" value=" ５ " onclick="val(5)">
<input type="button" value=" ６ " onclick="val(6)">
<input type="button" value="×" onclick="keisan('*')">
<input type="button" value=" １ " onclick="val(1)">
<input type="button" value=" ２ " onclick="val(2)">
<input type="button" value=" ３ " onclick="val(3)">
<input type="button" value="－" onclick="keisan('-')">
<input type="button" value=" ０ " onclick="val(0)">
<input type="button" value=" ・ " onclick="val('.')">
<input type="button" value=" ＋ " onclick="keisan('+')">
<input type="button" value="＝" onclick="keisan('=')">
</form>

～JavaScript～

total = 0;
input = "";
ope = "+";
flg = 1;

function val(data) {
flg = 0;
input += data;
document.dentaku.line.value = input;
}

function keisan(data) {
if (flg == 0) {
flg = 1;
cf = total + ope + input;
total = eval(cf);
input = "";
document.dentaku.line.value = total;
}
if (data == "=") {
total = 0;
ope = "+";
} else {
ope = data;
}
}

function cl() {
total = 0;
ope = "+";
input = "";
document.dentaku.line.value = total;
}

関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。

長くなりましたが、そこで質問なのですが、

(1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。

何となく理由は分かりますが、はっきりと理解したいです。

(2)上記のHTMLコードをもっと簡単に書けませんか？

特にonclickをボタンの数だけ書くのは手間です。

回答No.1

Taiyonoshizuku · ベストアンサー

(1)
keisanが呼ばれて
dataが=以外だったらope = dataになってるから。
dataにはonclickで指定した値が入っている。

(2)いちいちonclickが面倒となると、こんな感じかな。
ただhtmlに書くものは増える
<input type="text" name="line" value="0">
<button type="button" value="C">Ｃ</button>
<button type="button" value="7"> ７ </button>
<button type="button" value="8"> ８ </button>
<button type="button" value="9"> ９ </button>
<button type="button" value="/">÷</button>
<button type="button" value="4"> ４ </button>
<button type="button" value="5"> ５ </button>
<button type="button" value="6"> ６ </button>
<button type="button" value="*">×</button>
<button type="button" value="1"> １ </button>
<button type="button" value="2"> ２ </button>
<button type="button" value="3"> ３ </button>
<button type="button" value="-">－</button>
<button type="button" value="0"> ０ </button>
<button type="button" value="."> ・ </button>
<button type="button" value="+"> ＋ </button>
<button type="button" value="=">＝</button>

<script>
var total = 0;
var input = "";
var ope = "+";
var flg = 1;
document.addEventListener('DOMContentLoaded', function(){
var elems = document.querySelectorAll('button');
for (var i = 0; i < elems.length; i ++) {
elems[i].addEventListener('click', function(){
var value = this.value;
if (value.match(/[0-9]+/)) {
flg = 0;
input += this.value;
document.dentaku.line.value = input;
} else if (value === 'C') {
total = 0;
ope = "+";
input = "";
document.dentaku.line.value = total;
} else {
if (flg == 0) {
flg = 1;
cf = total + ope + input;
total = eval(cf);
input = "";
document.dentaku.line.value = total;
}
if (value == "=") {
total = 0;
ope = "+";
} else {
ope = value;
}
}
}, false);
}
}, false);
</script>

お礼

ありがとうございました。

input要素のbutton属性のかわりにbutton要素を使うのですね。コードの中の正規表現は問題ないのですが、イベントリスナーはクロスブラウザ問題でトラウマになりました。しかし、コードは大変勉強になりました。

回答No.2

yambejp

まぁ余計なお世話ですので不要なら聞き流してほしいのですが
evalを使っているウチはプログラミングは上達しないので
できれば別の書き方をされることをお勧めします

今回のケースであればswitchで場合分けをするのが妥当かと

お礼

ありがとうございます。

仰るようにevalは良くないと私が持っているJavaScriptの本にも書かれていました。その本には”eval is evil”なんて書かれていました。それはevalがJavaScriptプログラム(特に大規模なもの)において、予想だにしないバグを発生させるからだそうですが、私のようなアマチュアにとってはけっこう重宝します。例えば、”３＊５”といった文字列の計算式の計算はparseIntでは無理で、evalではないと無理なんですね。しかし一度、”switch　電卓"でググってみます。