자바 스크립트 전역 변수 - 함수 범위?

Question

자바 스크립트를 사용하여 텍스트 필드에 입력 된 두 숫자의 합과 평균을 계산하는 간단한 프로그램을 만들려고했습니다.

<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> 

텍스트 필드에서 값을 읽는 두 변수는 전역 적으로 선언되고 "a"와 "b"로 초기화됩니다. 합계와 평균은 계산 된 결과 대신 NaN (NotaNumber)으로 반환됩니다.

로컬 변수로 함수 내부의 변수를 모두 선언하면 코드가 제대로 작동하는 것으로 보이는데 이는 자바 스크립트에서 전역 변수의 범위에 대해 궁금한가요?

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 기능을 실행할 때 값을 얻고 싶다면

는, 당신은 그 기능이을 실행할 때 그 값 를 가져올 필요가있다.

는 다음 코드 예제를 참조하십시오 : 당신은 어떤 HTML 코드를 제공하지 않는

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 코드는 다음과 같다 DOM 작성 이전에 실행 중이므로 실제로 그 위치에 "text1"및 "text2"요소가 없습니다.

함수 안에 넣으면 위의 문제를 피할 수 있습니다. 페이지 끝 부분에서 이러한 함수를 실행하고있는 것으로 의심되거나 어딘가에서 onClick 이벤트를 사용하면됩니다.

그렇지 않은 경우 페이지 구조에 대해 좀 더 자세히 알려주십시오.