Javascript Глобальные переменные не инициализируются

Я создаю веб-страницу, которая вводится в текстовые поля(). На странице также есть три кнопки, которые выполняют разные функции. Эти функции имеют множество переменных, поэтому я сделал большинство переменных глобальными. Моя проблема заключается в том, что при вводе текста в текстовые поля и нажатии кнопки выполняется функция, но глобальные переменные не инициализируются, поэтому функция не может работать должным образом. Мне нужно, чтобы переменные инициализировались до запуска функции. Я сократил код до такой простой, насколько я могу, чтобы показать проблему. У моего исходного кода было три кнопки и три функции, поэтому мне нужно использовать глобальные переменные.Javascript Глобальные переменные не инициализируются

<html> 
    <head> 
    <body> 
    <form> 
    <br><input type="text" class="boxleft" placeholder="type here..." id="Age"/> 

    <br> <input type="text" id="retireAge" class="boxleft" placeholder="type here..." /> 
    </form> 

     <button id="test" onclick="CalcNW()" >Test</button> 

    <script type="text/javascript"> 
     //global variables 
     var age = document.getElementById("Age").value; 
     var rage = document.getElementById("retireAge").value; 

     function CalcNW() { 
     var workingyears = rage - age; 
     alert(workingyears); 
     } 
</script> 
</body> 
</html>

В этом примере функция не будет работать должным образом, потому что ярость и возраст будут пустыми. В любом случае, чтобы инициализировать глобальные переменные, прежде чем запускать какую-либо из функций?

источник

2015-07-09 Jacob Covey

Ну, это плохой дизайн. Даже если вы хотите, чтобы ваши переменные были глобальными, вы должны оценить значение в форме после щелчка функции. Что происходит, так это то, что javascript сразу же заполняет значения, вероятно, до того, как dom закончил загрузку. Кроме того, когда вы определяете глобальные значения на основе состояния приложения, лучше всего добавить обработчик window.onload. Получайте удовольствие от развития. :)

Может быть, вы можете сделать что-то вроде этого:

age = 0; 
rage 0; 

function CalcNW() { 
    getInput(); 
    var workingyears = rage - age; 
    alert(workingyears); 
} 

function getInput(){ 
    age = document.getElementById("Age").value; 
    rage = document.getElementById("retireAge").value; 
}

источник

2015-07-09 18:10:56

Спасибо, что это сработало отлично. И спасибо за совет, я довольно новый кодер, поэтому любые советы помогают –

Не беспокойтесь. Наслаждайтесь и получайте удовольствие. :) Я предлагаю прочитать эту книгу, когда у вас будет время. http://eloquentjavascript.net/Eloquent_JavaScript.pdf –

Wrap код JS в window.onload

window.onload = function(){ 
     var age = document.getElementById("Age").value; 
     var rage = document.getElementById("retireAge").value; 

     function CalcNW() { 
      var workingyears = rage - age; 
      alert(workingyears); 
     } 
}

источник

2015-07-09 18:07:23

 //global variables 
     var age, rage; 

     function CalcNW() { 
      age = document.getElementById("Age").value; 
      rage = document.getElementById("retireAge").value; 
      var workingyears = rage - age; 
      alert(workingyears); 
     }

Почему бы не объявить переменные вне вашей функции, и установить их внутри него?

источник

2015-07-09 18:15:03 StuR

Javascript Глобальные переменные не инициализируются

ответ

Смежные вопросы