在函数中移动变量。我错过了什么？

Question

我不确定如何找到这个问题的答案，所以这里是我想要弄清楚的：我对javascript还是一个新手，所以请原谅任何复杂的逻辑和编码。我正在学习回调，但我想进一步让javascript生成一个动态语句，该语句将根据调用的函数而改变。例如：

“这两个数：115加35=150.”，或
“这两个数：115减35=80.”，或
“这两个数：115乘以35=4025.”，或
“这两个数：115除以35=3.2857。”

在网页中，我有一个ID为“Callback-Answer”的html元素：

    <p id="callback-answer">The answer should appear here. If not, the script is broken.</p>

我找不到一种直接通过函数名设置变量的方法，所以我编写了另一个函数来实现，并返回值“operand”。

如果运行这个函数，您可以看到main函数中的console.log返回了我想要的值，但我似乎无法从任何函数中得到它，即使我在全局作用域级别声明了变量名。最后的innerHTML语句只显示“undefined”，而不是我设置的操作数。函数已经在返回值，所以我不认为我可以将这个值放入同一行中。我如何在函数之外获得对这个变量的访问？我甚至需要“操作”功能吗？有没有一个很好的人可以提出一个更好的方法或者什么想法？

温柔点，我在练习。

    var answer = document.querySelector("#callback-answer");
    var number1 = 115, number2 = 35;
    var operand;

    var operation = function (op) {
        if (op === add) {operand = "plus";}
        else if (op === subtract) {operand = "minus";}
        else if (op === multiply) {operand = "times";}
        else {operand = "divided by";}
        return operand;
    };

    var add = function (a,b) {return a + b;};
    var subtract = function (a,b) {return a - b;};
    var multiply = function (a,b) {return a * b;};
    var divide = function (a,b) {return a / b;};

    var calc = function (num1, num2, callback) {
        "use strict";
        operation(callback);
        console.log("The operand is: " + operand);
        if (typeof callback === "function") {
            return callback(num1,num2);
        }
    };


    answer.innerHTML = "These two numbers: " + number1 + " " + operand + " " + number2 + " = " + calc(number1, number2, multiply);

Answer 1

这解决了您提出的问题：

null

var answer = document.querySelector("#callback-answer");
var number1 = 115, number2 = 35;
var operand;

var operation = function (op) {
    if (op === add) {operand = "plus";}
    else if (op === subtract) {operand = "minus";}
    else if (op === multiply) {operand = "times";}
    else {operand = "divided by";}
    return operand;
};

var add = function (a,b) {return a + b;};
var subtract = function (a,b) {return a - b;};
var multiply = function (a,b) {return a * b;};
var divide = function (a,b) {return a / b;};

var calc = function (num1, num2, callback) {
    "use strict";
    operation(callback);
    console.log("The operand is: " + operand);
    if (typeof callback === "function") {
        return callback(num1,num2);
    }
};

var result = calc(number1, number2, multiply);
answer.innerHTML = "These two numbers: " + number1 + " " + operand + " " + number2 + " = " + result

html lang-html prettyprint-override"><p id="callback-answer"></p>

Answer 2

在您的代码中，operand一开始未初始化。您确实在calc函数中设置了operand的值，但问题是：在代码的最后一行中，在使用operand之后调用了calc。这意味着在调用calc函数之前，操作数没有值，这就是为什么您可以console.log并在calc中获得它的值，而不是在最后一行代码中。

一个快速而简单的修复方法是调用calc并在使用操作数之前将结果放入一个变量中，如下所示：

var calcResult = calc(number1, number2, multiply);
answer.innerHTML = "These two numbers: " + number1 + " " + operand + " " + number2 + " = " + calcResult;

我被教导要尽可能避免全局变量。如果可以，通常更好的做法是让实用程序函数简单地接受值并返回结果，而不是将结果设置为全局varaible然后使用全局变量。在这种情况下，它可能意味着多了一些代码，但它不太容易出现程序员错误。

以下是对Javascript代码的编辑，它不使用全局操作数变量：

var answer = document.querySelector("#callback-answer");
var number1 = 115, number2 = 35;

var operation = function (op) {
  var operand;
  if (op === add) {operand = "plus";}
  else if (op === subtract) {operand = "minus";}
  else if (op === multiply) {operand = "times";}
  else {operand = "divided by";}
  return operand;
};

var add = function (a,b) {return a + b;};
var subtract = function (a,b) {return a - b;};
var multiply = function (a,b) {return a * b;};
var divide = function (a,b) {return a / b;};

var calc = function (num1, num2, callback) {
  "use strict";
  if (typeof callback === "function") {
    return callback(num1,num2);
  }
};

var operand = multiply;
var operandString = operation(operand);
var calcResult = calc(number1, number2, operand);
answer.innerHTML = "These two numbers: " + number1 + " " + operandString + " " + number2 + " = " + calcResult;