JS编写简易计算器

第一种方法，较直接

HTML

 <div id="calculator">
        <p>
            <input type="text" class="formerInput" value="1">
            <span class="sign">+</span>
            <input type="text" class="laterInput" value="1">
            <span>=</span>
            <sapn class="resultOut">2</sapn>
        </p>
        <p>
            <input type="button" value="+" onclick="addHandler()">
            <input type="button" value="-" onclick="subtractHandler()">
            <input type="button" value="*" onclick="multiplyHandler()">
            <input type="button" value="/" onclick="divideHandler()">
        </p>
    </div>

JS

        //获取元素
        var calculator = document.querySelector("#calculator");
        var formerInput = calculator.querySelector('.formerInput');
        var laterInput = calculator.querySelector('.laterInput');
        var sign =calculator.querySelector('.sign');
        var resultOut = calculator.querySelector('.resultOut');
        //加
        function addHandler(){
            sign.innerHTML = '+';
            resultOut.innerHTML = +formerInput.value + +laterInput.value;
        }
        //减
        function subtractHandler(){
            sign.innerHTML = '-';
            resultOut.innerHTML = formerInput.value - laterInput.value;
        }
        //乘
        function multiplyHandler(){
            sign.innerHTML = '*';
            resultOut.innerHTML = formerInput.value * laterInput.value;
        }
        //除
        function divideHandler(){
            sign.innerHTML = '/';
            resultOut.innerHTML = formerInput.value / laterInput.value;
        }

虽然这样一个程序就完了，但是并不好，里面太多重复代码

下面来看另一种方法

            <input type="button" value="+" class="btn" title="add">
            <input type="button" value="-" class="btn" title="subtract">
            <input type="button" value="*" class="btn" title="multiply">
            <input type="button" value="/" class="btn" title="divide">
            <input type="button" value="%" class="btn" title="mod">

HTML不再直接绑定事件
第一步获取元素

        var wrapElem = document.querySelector("#calculator");
        var calculatorElem = {
            formerInput : wrapElem.querySelector('.formerInput'),
            laterInput : wrapElem.querySelector('.laterInput'),
            sign : wrapElem.querySelector('.sign'),
            resultOut : wrapElem.querySelector('.resultOut'),
            btns : wrapElem.querySelectorAll('.btn')
        };

第二步封装方法并调用

        each(calculatorElem.btns,function(index,elem){
            elem.onclick = function(){
                console.log(this.title);
                updateSign(this.value);
                outputResult(operate(this.title,calculatorElem.formerInput.value,calculatorElem.laterInput.value));
            }
        })
        //循环
        function each(arry, fn){
            for(var i = 0 ; i<arry.length ; i++){
                fn(i,arry[i]);
            }
        }
        //封装innerHTML
        function outputResult(result){
            calculatorElem.resultOut.innerHTML = result;
        }
        //封装innerHTML
        function updateSign(symbol){
            calculatorElem.sign.innerHTML = symbol;
        }
        //加减乘除
        var operation = {
            add: function(num1,num2){
                return +num1 + +num2;
                // console.log(+num1 + +num2);
            },
            subtract: function(num1,num2){
                return num1 - num2;
            },
            multiply: function(num1,num2){
                return num1 * num2;
            },
            divide: function(num1,num2){
                return num1 / num2;
            },
            addOperation: function(name,fn){
                if(!this[name]){
                    this[name] = fn;
                }
                return this;
            }
        }
        //添加算数方法
        operation.addOperation('mod',function(num1,num2){
            return num1 % num2;
        });
        //运算
        function operate(name,num1,num2){
            if(!operation[name])throw new Error('不存在');
            return operation[name](num1,num2);
        }

虽然代码多了好多，但是减少了重复代码
遇到的问题：function后面的（）加不加问题|this只想问题|匿名函数问题|个别浏览器不能运行问题|函数作为参数调用问题