訪問私有函數中的全局（javascript）變量

Question

我目前正在研究一個用於學習目的的計算器，一切都在某種程度上有效，但不是我希望它的方式。

這是代碼的累加部分：

HTML：

<input type="number" id="int1" />
<input type="number" id="int2" />
<input type="button" onClick="sumOf();" />
<div id="result"></div>  // To display the result

JS：

var int1 = document.getElementById("int1").value;
var int1 = document.getElementById("int2").value;
var result = document.getElementById("result");

function sumOf(int1, int2) {
  result.innerHTML = parseFloat(int1) + parseFloat(int2);
}

它現在的方式，如果我通過onClick事件調用該函數，它將導致NaN。 檢查int的類型結果為'undefined'。 所以我把變量放在函數中，它工作正常，因為現在函數可以到達它們。

我的問題是如何才能訪問函數之外的變量？ 我嘗試創建一個對象，但是在onClick事件中引用對象內部的正確函數時遇到了問題，我嘗試了“objectName.functionInsideTheObject（）;”。 結果是沒有用。

我怎樣才能做到這一點？ 將為其他計算添加新函數，並且始終復制粘貼變量非常繁瑣。

編輯：

我的問題與變量聲明中的“.value”有關。 如果我聲明一個變量：

var int1 = document.getElementById("int1");  // Not getting the value directly
var int2 = document.getElementById("int2");

然后引用函數內部變量的值，如下所示：

function sumOf() {
  result.innerHTML = parseFloat(int1.value) + parseFloat(int2.value);
}

它工作正常。 我不知道為什么.value在全局范圍內不起作用。 仍然不完美，但不那么乏味。

Answer 1

我相信如果你這樣創建它：

int1 = document.getElementById("int1").value;

如果沒有var它就是全局的。

Answer 2

聲明變量的方式是正確的。

並且這些變量是NaN，因為你將它們填充為函數中的Arguments

function sumOf(int1, int2) {
  result.innerHTML = parseFloat(int1) + parseFloat(int2);
}

你應該調用這個函數

function sumOf() {
  result.innerHTML = parseFloat(int1) + parseFloat(int2);
}

但是我覺得如果宣布你的功能會更好

function sumOf() {
  var int1 = document.getElementById("int1").value;
  var int1 = document.getElementById("int2").value;
  var result = document.getElementById("result");

  result.innerHTML = parseFloat(int1) + parseFloat(int2);
}