0

私は現在、学習目的の電卓に取り組んでおり、ある意味ではすべてが機能しますが、私が望んでいる方法では機能しません。

コードの加算部分は次のとおりです。

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 の型をチェックすると、「未定義」になります。したがって、変数を関数内に配置すると、関数がそれらに到達できるようになったため、正常に機能します。

私の質問は、関数外の変数にアクセスするにはどうすればよいですか? オブジェクトを作成してみましたが、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 がグローバル スコープで機能しない理由がわかりません。まだ完璧ではありませんが、退屈ではありません。

4

2 に答える 2

1

次のように作成すると、次のようになります。

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

var がなければ、それはグローバルです。

于 2012-12-06T10:34:34.743 に答える
1

変数を宣言した方法は正しいです。

そして、これらの変数は、関数の引数として再度パディングしているため、NaN です。

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);
}
于 2012-12-06T10:37:57.230 に答える