Let we build a calculator on the browser

desgin the web page by HTML

打開瀏覽器按下 “F12” 後,會出現console版面(一般都在下方)

嘗試輸入以下程式程式(主要是重新改變頁面)

html=' \
    <div> \
        <input type="text" id="inputBox" value="0"> \
        <button type="button" id="addSign">+</button> \
        <button type="button" id="subtractSign">-</button> \
        <button type="button" id="multiplySign">*</button> \
        <button type="button" id="divideSign">/</button> \
        <button type="button" id="equalSign">=</button> \
        <button type="button" id="cleanSign">Clean</button> \
    </div>';
document.body.innerHTML = html;

Add, subtract, multiply and divide

輸入計算時會使用到的函式式

function sum(a1, a2){
    return a1+a2;
}

function substract(a1, a2){
    return a1-a2;
}

function multiply(a1, a2){
    return a1*a2;
}

function divide(a1, a2){
    var tmp = a1/a2;
    return isNaN(tmp)? 0 : tmp;
}

How to work?

一般網頁上看得到或看不到的東西,我們都稱為 Element 以下程式是取得每個 Elements let we get elements.

var inputBox = document.getElementById('inputBox');
var addSign = document.getElementById('addSign');
var subtractSign = document.getElementById('subtractSign');
var multiplySign = document.getElementById('multiplySign');
var divideSign = document.getElementById('divideSign');
var equalSign = document.getElementById('equalSign');
var cleanSign = document.getElementById('cleanSign');

我還需要一個主程式來控制我們的操作流程(這邊我拆成兩個邏輯)

We Write a function what name is preRun,

it will pre-process the data when you type numbers.

function preRun(signType){
    var data = Number(inputBox.value);
    if(isNaN(data)){
        alert('please type number');
        return;
    }
    if(typeof preRun.tmp !== 'number'){
        preRun.tmp = data;
    }
    if(typeof preRun.sign !== 'string'){
        preRun.sign = signType;
        return;
    }
    preRun.sign = signType;
    run();
}

We Write a function what name is run,

it will process the data and show the result on inputBox when you type button of equal-sign.

function run(){
    var data = Number(inputBox.value);
    if(typeof preRun.sign !== 'string' || typeof preRun.tmp !== 'number')
        return;
    var result = 0;
    switch(preRun.sign){
        case 'add' :
            result = sum(preRun.tmp, data);
            break;
        case 'subtract' :
            result = substract(preRun.tmp, data);
            break;
        case 'multiply' :
            result = multiply(preRun.tmp, data);
            break;
        case 'divide' :
            result = divide(preRun.tmp, data);
            break;
    }
    preRun.tmp = result;
    inputBox.value = result;
}

這裡是清理緩存和歸零的

just clean data function.

function cleanData(){
    delete preRun.tmp;
    delete preRun.sign;
    inputBox.value = "0";
}

再來是把要做的事註冊進每個Elements事件裡面

let we regist event.

addSign.addEventListener('click',function(){ preRun('add'); });
subtractSign.addEventListener('click',function(){ preRun('subtract'); });
multiplySign.addEventListener('click',function(){ preRun('multiply'); });
divideSign.addEventListener('click',function(){ preRun('divide'); });

equalSign.addEventListener('click',function(){ run(); });
cleanSign.addEventListener('click',function(){ cleanData(); });