javascript глобальные переменные - область функций?

Question

Я пробовал сделать простую программу, используя 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> 

Две переменных, которые считывают значения из текстовых полей глобально объявлены и инициализирован как «а» и «б». Сумма и среднее значение возвращаются как 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.

Если это не так, пожалуйста, предоставьте более подробную информацию о структуре вашей страницы.