完成了带有神秘缺陷的 JavaScript 计算器答案

【问题标题】：Finished JavaScript calculator with mysterious flaw完成了带有神秘缺陷的 JavaScript 计算器
【发布时间】：2013-01-17 00:29:52
【问题描述】：

我已经尝试制作这个计算器一段时间了，在我看来一切都很好，但无论我检查了多少次代码，它都无法工作。我要疯了！这怎么行不通？当我点击计算时没有任何反应！请帮我解决这个问题！

这是 JavaScript：

function calc() {
    var num1, num2;
    var sign = "+";
    var result;

    function getNum1() {
        num1 = document.getElementById('num1').value;
        return Number(num1);
    }
    function getNum2() {
        num2 = document.getElementById('num2').value;
        return Number(num2);
    }
    function getSign() {
        sign = document.getElementById('sign').value;
        return sign;
    }
    function setResult() {
        document.getElementById('result').value = result;
    }
    function doCalc() {

        var num1 = getNum1();
        var num2 = getNum2();

        if(getSign() == "*") {
            result = num1 * num2; 
        }else if(getSign() == "/") {
            result = num1 / num2;
        }else if(getSign() == "-") {
            result = num1 - num2; 
        }else{
            result = num1 + num2;
        }
        setResult();
    }
}

【问题讨论】：

考虑到我们没有所有的代码，它可能仍然是“神秘的”。 calc() 是否被调用？（添加警报/或 console.log）
是的 calc 正在被调用答案：
它是否调用doCacl()？请参阅@thesystem 的答案。
它没有！计算（）；成功了！

标签： javascript html calculator

【解决方案1】：

如果您正在调用 doCalc()，则无法访问它，因为它的范围在 calc() 函数内。

如果您调用calc()，它不会做任何事情，因为它从不调用doCalc()。

如果您在calc() 函数的末尾添加一个doCalc() 调用，并且如果您的calc() 函数是可访问的，那么它将起作用。

【讨论】：

答案：
抱歉，不小心点击了发帖按钮。如果有帮助，上面是脚本的 html。我将如何去做你让我做的事情？
@user1985551：在calc() 函数中，键入doCalc();。你实际上可以把它放在里面的任何地方，比如var result; 行之后。如果这不起作用，那么您的 calc() 函数可能不是全局的。

【解决方案2】：

确保在表单字段上使用.value，在其他所有内容上使用.innerHTML（spans、ps 等）。 .innerHTML 获取或设置元素的内部。

另外，请确保提交按钮具有onclick 的事件处理程序——最简单的方法是<input onclick="doCalc();" ... />。

【讨论】：

【解决方案3】：

我会尝试解耦 calc() 函数。这是一种解决方法。

var Calculator = {
    "eval" : function(operator, x, y) {
                 switch( operator ) {
                     case "+":
                         return (x + y);
                     case "-":
                         return (x - y);
                 }
             }
}

更好，

    var Calculator = {
    "eval" : function(operator) {
                 var args = Array.prototype.slice.call(arguments);
                 args.splice(0,1); // lazy hack to remove the argument for the operator

                 switch( operator ) {
                     case "+":
                         return args.reduce( function(x,y){ return (x + y); } );
                     case "-":
                         return args.reduce( function(x,y){ return (x - y) } );
                 }
             }
}

这种方式更容易重复使用和测试。

var answer = Calculator.eval( '+', 20, 20, 2 );  // yay, prefix notation

第二个变体使用高阶函数“reduce”，将数组缩减为单个值。

以下是有关 reduce 工作原理的步骤。我已经提取了 lambda 函数以使事情更加清晰。

var arr = [20, 20, 20];
function sum(x, y){ return (x + y); }

function reduceMagic(arr){
    var temp = sum(arr[0], arr[1]);  // temp -> 40
    temp =  sum(temp, arr[2]);       // temp -> 42
    return temp;
}

【讨论】：