將變量訪問到函數中-Javascript

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原理 （不要重復自己），並且每當您看到同一代碼的多個副本時，都應該循環執行某些操作，將通用代碼分解為多用途函數或同時使用兩者。

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");