老师，帮忙看下代码

来源：4-7 第六次修改--模块化

林迦叶

2019-10-16 23:17:39

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易计算器的实现</title>
    <!-- <script src="index.js"></script> -->
    <style type="text/css">
    html,
    body{
        height: 100%;
        margin: 0;
        padding: 0;
    }
    body{
        background: #666;
        position: relative; 
    }
    .main{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

    }

    </style>
</head>
<body>
    <div class="main">
        <p>
            <input type="text" class="formerInput" value="1">
            <span class="sign">+</span>
            <input type="text" class="laterInput" value="1">
            <span>=</span>
            <span class="result">2</span>
        </p>
        <p>
            <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">
        </p>
    </div>
    <script>
        (function (){
            var main = document.querySelector(".main");//document.querySelector()获取指定元素中的第一个元素     
            var mainElem = {
                formerInput:main.querySelector(".formerInput"),
                laterInput:main.querySelector(".laterInput"),
                sign:main.querySelector(".sign"),
                result:main.querySelector(".result"),
                btns:main.querySelectorAll('.btn')
            };
            // 绑定事件
            each(mainElem.btns,function(index,elem){
                elem.onclick = function(){
                    updateSign(this.value);
                    outputResult(operate(this.title,mainElem.formerInput.value, mainElem.laterInput.value));
                };
            });
            // 遍历数组
            function each(array, fn){
                for(var i = 0;i < array.length;i++){
                    fn(i, array[i]);
                }
            }
            // 更新符号
            function updateSign(mark){
                mainElem.sign.innerHTML = mark;
            }
            //运算
            var operate = (function(){
                var operation = {
                    // 加法函数
                    add:function(num1,num2){
                        return +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(!operation[name]){
                            operation[name]=fn;
                        }
                        return operation;
                    }
                };
               function operation(name,num1,num2){
                    if(!operation[name]) throw new Error('不存在名字叫'+name+"的运算方法！");
                    return operation[name](num1,num2);
                }
                operate.addOperation = operation.addOperation;
                return operate;
            })();
            operate.addOperation('mod',function(num1,num2){
                return num1 % num2;
            });
            // 输出结果
            function outputResult(outcome){
                mainElem.result.innerHTML = outcome;
            } 
        })();
    </script>
</body>
</html>

修改模块化之前可以正常运算，然后改完之后，忘记改到哪一步了，发生报错，不知道怎么修改

写回答

1回答