Question

我遇到了访问函数变量的麻烦。我已经测试了几个代码，但似乎没有一个对我有用。这是我到目前为止的js代码：

    function Multiply (x,y) {
    var a = x.value,
        b = y.value,
        r = a*b;
    document.getElementById("result").innerHTML = r + " g/mol";     
    }
    function Multiply2 (x,y) {
    var c = x.value,
        d = y.value,
        r2 = c*d;
    document.getElementById("result2").innerHTML = r2 + " g/mol";       
    }
    function Multiply3 (x,y) {
    var e = x.value,
        f = y.value,
        r3 = e*f;
    document.getElementById("result3").innerHTML = r3 + " g/mol";       
    }
    function Multiply4 (x,y) {
    var g = x.value,
        h = y.value,
        r4 = g*h;
    document.getElementById("result4").innerHTML = r4 + " g/mol";       
    }
    function Multiply5 (x,y) {
    var i = x.value,
        j = y.value,
        r5 = i*j;
    document.getElementById("result5").innerHTML = r5 + " g/mol";       
    }

基本上我需要另一个函数来汇总所有值（r，r2，r3，r4和r5），并在我的HTML文档的<span>标记中显示结果作为其他值。这将是我追逐的那个：

document.getElementById("total").innerHTML = total + " g/mol";

Answer 1

局部变量对于特定函数是私有的，并且仅在函数执行期间存在于该函数内和/或直到该函数内的任何闭包完成。你根本无法从函数外部访问它们，即使你可以，它们在函数运行后也不再存在。因此，尝试访问它们并不是思考这个问题的正确方法。

相反，我建议的是一个执行相同工作的单个函数，但将计算作为返回值返回，您可以在调用后收集它。您还可以将要在DOM中设置计算的id值作为参数传入，这样对函数的所有5次调用都可以使用完全相同的代码，如下所示：

function Multiply(x, y, id) {
    var result = x.value * y.value;
    document.getElementById(id).innerHTML = result + " g/mol";     
    return result;
}

var total = Multiply(a, b, "result");
total += Multiply(c, d, "result2");
total += Multiply(e, f, "result3");
total += Multiply(g, h, "result4");
total += Multiply(i, j, "result5");
document.getElementById("total").innerHTML = total + " g/mol";

根据x，y参数的来源，您可以将这5个函数调用转换为单个循环，并在循环内调用一个函数。

值得记住DRY principle（不要重复自己），每当你看到相同代码的多个副本时，你应该在循环中重复一些操作，这是常见的因素代码转换为多用途功能或两者兼而有之。

Answer 2

试试这个

var r, r2, r3, r4, r5;

function Multiply (x,y) {
  var a = x.value,
      b = y.value;
  r = a*b;
  document.getElementById("result").innerHTML = r + " g/mol";     
}

function Multiply2 (x,y) {
  var c = x.value,
      d = y.value;
  r2 = c*d;
  document.getElementById("result2").innerHTML = r2 + " g/mol";       
}

function Multiply3 (x,y) {
  var e = x.value,
      f = y.value;
  r3 = e*f;
  document.getElementById("result3").innerHTML = r3 + " g/mol";       
}

function Multiply4 (x,y) {
  var g = x.value,
      h = y.value;
  r4 = g*h;
  document.getElementById("result4").innerHTML = r4 + " g/mol";       
}

function Multiply5 (x,y) {
  var i = x.value,
      j = y.value;
  r5 = i*j;
  document.getElementById("result5").innerHTML = r5 + " g/mol";       
}

Answer 3

答案：您无法访问本地变量。但在你的情况下，你可以使用一个返回结果的函数并多次调用它。

function Multiply (x,y) {
    return x.value * y.value;    
}
var r1 = Multiply(x1, y1);
document.getElementById("result1").innerHTML = r1 + " g/mol";
var r2 = Multiply(x2, y2);
document.getElementById("result2").innerHTML = r2 + " g/mol";
var r3 = Multiply(x3, y3);
document.getElementById("result3").innerHTML = r3 + " g/mol";
var r4 = Multiply(x4, y4);
document.getElementById("result4").innerHTML = r4 + " g/mol";
var r5 = Multiply(x5, y5);
document.getElementById("result5").innerHTML = r5 + " g/mol";
var total = r1 + r2 + r3 + r4 + r5;
document.getElementById("total").innerHTML = total + " g/mol";

编辑：通过将DOM更新提取到另一个函数中来进一步删除重复。

function Multiply(x,y) {
    return x.value * y.value;    
}
function UpdateDOM(value, element) {
    document.getElementById(element).innerHTML = value + " g/mol";
}
var r1 = Multiply(x1, y1);
UpdateDOM(r1, "result1");
var r2 = Multiply(x2, y2);
UpdateDOM(r2, "result2");
var r3 = Multiply(x3, y3);
UpdateDOM(r3, "result3");
var r4 = Multiply(x4, y4);
UpdateDOM(r4, "result4");
var r5 = Multiply(x5, y5);
UpdateDOM(r5, "result5");
UpdateDOM(r1 + r2 + r3 + r4 + r5, "total");

您可以进一步添加另一个包含这两个函数的函数，并接受x, y, element个参数并返回结果。

function Multiply(x,y) {
    return x.value * y.value;    
}
function UpdateDOM(value, element) {
    document.getElementById(element).innerHTML = value + " g/mol";
}
function DisplayResult(x, y, element) {
    var result = Multiply(x,y);
    UpdateDOM(result, element);
    return result;
}
var total = DisplayResult(x1, y1, "result1") 
            + DisplayResult(x2, y2, "result2") 
            + DisplayResult(x3, y3, "result3") 
            + DisplayResult(x4, y4, "result4")
            + DisplayResult(x5, y5, "result5");
UpdateDOM(total, "total");

访问变量到函数 - Javascript

3 个答案: