JavaScriptで電卓つくってみた

ソースコード

いつものことですが、JavaScriptのプロフェッショナルではないので参考程度でお願いしますｗ

なんかおかしいところがあればコメントで教えてください

<div id="calc">
<p id="value">0</p>
<button onclick="del()">&lt;</button>
<button onclick="c()">C</button>
<button onclick="ac()">AC</button>
<button onclick="push('/')">/</button>
<br>
<button onclick="push('7')">7</button>
<button onclick="push('8')">8</button>
<button onclick="push('9')">9</button>
<button onclick="push('*')">*</button>
<br>
<button onclick="push('4')">4</button>
<button onclick="push('5')">5</button>
<button onclick="push('6')">6</button>
<button onclick="push('-')">-</button>
<br>
<button onclick="push('1')">1</button>
<button onclick="push('2')">2</button>
<button onclick="push('3')">3</button>
<button onclick="push('+')">+</button>
<br>
<button onclick="push('0')">0</button>
<button onclick="push('00')">00</button>
<button onclick="push('.')">.</button>
<button onclick="eq()">=</button>
</div>
<script>
    var value = 0;
    var symbol = "";
    var buf = "";
    var do_clear = false;

    function push(str) {
        if(do_clear) {
            symbol = buf = "";
            do_clear = false;
        }
        if (str === '+' || str === '-' || str === '*' || str === '/') {
            if(buf) eq(true);
            symbol = str;
        }
        else {
            buf += str;
            document.getElementById('value').innerText = buf;
        }
    }

    function eq(do_clear_immediately = false) {
        if (symbol === "") {
            value = Number(buf);
        } else if (symbol === '+') {
            value += Number(buf);
        } else if (symbol === '-') {
            value -= Number(buf);
        } else if (symbol === '*') {
            value *= Number(buf);
        } else if (symbol === '/') {
            value /= Number(buf);
        }
        if(do_clear_immediately) symbol = buf = "";
        else do_clear = true;
        document.getElementById('value').innerText = String(value);
    }

    function del() {
        if(do_clear) {
            symbol = "";
            buf = String(value);
            do_clear = false;
        }
        buf = buf.substr(0, buf.length - 1);
        document.getElementById('value').innerText = buf ? buf : 0;
    }

    function c() {
        buf = "";
        document.getElementById('value').innerText = "0";
    }

    function ac() {
        value = 0;
        symbol = buf = "";
        document.getElementById('value').innerText = "0";
    }
</script>
<style>
    #value {
        font-size: 32px;
    }
    #calc button {
        width: 64px;
        height: 32px;
        margin: 2px;
    }
    #calc {
        border: 1px solid black;
        width: 320px;
        padding: 10px;
    }
</style>

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

created by Rinker

¥2,035 (2022/03/26 10:47:33時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

created by Rinker

¥90 (2022/03/26 10:47:33時点 Amazon調べ-詳細)

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング