JavaScriptのグローバル変数 - 関数のスコープ？

Question

私は、テキストフィールドに入力された2つの数字の合計と平均を計算するjavascriptを使って簡単なプログラムを作ろうとしました。

<script> 
var a=parseInt(document.getElementById("text1").value); 
var b=parseInt(document.getElementById("text2").value); 
function sum() 
{ 
var result = document.getElementById("valueofsum"); 
var sum=a+b; 
result.innerHTML = sum; 
} 

function average() 
{ 
var result = document.getElementById("valueofavg"); 
var avg=(a+b)/2; 
result.innerHTML = avg; 

} 

function reset() 
{ 
document.getElementById("text1").value = ""; 
document.getElementById("text2").value = ""; 
document.getElementById("valueofsum").innerHTML = ""; 
document.getElementById("valueofavg").innerHTML = ""; 
} 
</script> 

テキストフィールドから値を読み取る2つの変数は、グローバルに宣言され、 "a"と "b"として初期化されます。 合計と平均は、計算結果の代わりにNaN（NotaNumber）として返されます。

ローカル変数として関数内の両方の変数を使用すると、コードが正しく動作しているように見えますが、これはJavaScriptのグローバル変数の範囲について不思議に思っていますか？

Answer 1

グローバルスコープ内で値を取得していて、それらの行が実行されたときに値が空でした。繰り返しを避けるためにフィールドスコープをグローバルスコープで取得する必要がありますが、サイド関数では値を取得する必要があります。

<script> 
    var a = document.getElementById("text1"); 
    var b = document.getElementById("text2"); 
    function sum() 
    { 
    var result = document.getElementById("valueofsum"); 
    var sum = parseInt(a.value) + parseInt(b.value); 
    result.innerHTML = sum; 
    return sum; 
    } 

    function average() 
    { 
    var result = document.getElementById("valueofavg"); 
    var avg= sum()/2; 
    result.innerHTML = avg; 
    return avg; 
    } 

    function reset() 
    { 
    document.getElementById("text1").value = ""; 
    document.getElementById("text2").value = ""; 
    document.getElementById("valueofsum").innerHTML = ""; 
    document.getElementById("valueofavg").innerHTML = ""; 
    } 
</script> 

Answer 2

ページが読み込まれるときに入力から値を読み込みます（おそらく空の文字列です）。

あなたは（ユーザーがそれらに何かを入力した、すなわち後）時の値で実行sumかaverage機能を取得したい場合は、これらの関数はを実行すると、その値をフェッチする必要があります。

次のコード例を参照してください。

function sum() { 
    var a=parseInt(document.getElementById("text1").value); 
    var b=parseInt(document.getElementById("text2").value); 
    var result = document.getElementById("valueofsum"); 
    var sum=a+b; 
    result.innerHTML = sum; 
} 

Answer 3

あなたは、任意のHTMLコードを提供していないので、それはあなたのコードが得られた後、私はあなたがあなたのページの開始時にスクリプトを配置していると思いますし、HTMLコードは、次のDOM作成の前に実行されているため、その時点で実際には「text1」と「text2」要素は存在しません。

ファンクション内に配置するときは、上記の問題を回避するだけで、ページの最後にこれらの関数を実行していると思われます。または、どこかのonClickイベントで実行すると思われます。

これが当てはまらない場合は、ページの構造をもう少し詳しくご説明ください。