Почему эти глобальные переменные обращаются в нуль между 3 функциями?

Question

У меня есть три функции, и они для этого примера увольняют в следующем порядке:

function editmatch(){ 
     defaultstyling(); 
     $('.all_cons').css({display: 'none'}); 
     $('.confirm_button'+id).css({display: 'inline'}); 
     storecontents(); 
     isediting = true; 
     $(document).find("td[id^='hero_column"+id+"']").html('<input id="select_hero" type="text" name="select_hero">'); 
     $(document).find("td[id^='result_column"+id+"']").html("<select name='winloss'><option value='Win'>Win</option><option value='Loss'>Loss</option></select>"); 
     $(document).find("td[id^='gamemode_column"+id+"']").html('<select name="gamemode"<option value="All Pick">All Pick</option><option value="Captains Mode">Captains Mode</option><option value="Captains Draft">Captains Draft</option></select>'); 
     $(document).find("td[id^='mmr_column"+id+"']").html('<input id="input_mmr" type="text" name="input_mmr">'); 
} 

Резюме: функция изменяет текст внутри ячейки в «форму» (до сих пор не завершено). Перед изменением текста внутри ячейки функция storecontents() запускается. То есть здесь:

function storecontents(){ //HOLDS CONTENTS OF ROW 
    var herotemp = document.getElementById("hero_column"+id).innerHTML; 
    var resulttemp = document.getElementById("result_column"+id).innerHTML; 
    var gametemp = document.getElementById("gamemode_column"+id).innerHTML; 
    var mmrtemp = document.getElementById("mmr_column"+id).innerHTML; 
    alert(herotemp); 
} 

Эта функция хранит текст внутри ячейки до его изменения. Обратите внимание, что эти переменные определяются глобально в верхней части моей страницы кодирования. Это предупреждение показывает herotemp как предыдущий html: «Rubick».

Затем, кнопка срабатывает этот код (если необходимо), чтобы изменить содержание назад к оригиналу:

function abandonedit(){ 
     alert(herotemp); 
     $(document).find("td[id^='hero_column"+id+"']").html(herotemp); 
     $(document).find("td[id^='result_column"+id+"']").html(resulttemp); 
     $(document).find("td[id^='gamemode_column"+id+"']").html(gametemp); 
     $(document).find("td[id^='mmr_column"+id+"']").html(mmrtemp); 
} 

Однако предупреждение в приведенной выше функции показывает, что herotemp переменные (и все остальные) являются пустыми , Я думал, что глобально объявленная переменная может использоваться во всех функциях? Я сделал что-то не так, или я не понимаю?

Answer 1

Если вы объявите переменную usin var herotemp, у вас будет локальная переменная (функция scope) с именем herotemp, которая предотвратит доступ к глобальной переменной herotemp.

Это должно исправить ваш код до предполагаемого поведения.

function storecontents(){ //HOLDS CONTENTS OF ROW 
    /*var*/ herotemp = document.getElementById("hero_column"+id).innerHTML; 
    var resulttemp = document.getElementById("result_column"+id).innerHTML; 
    var gametemp = document.getElementById("gamemode_column"+id).innerHTML; 
    var mmrtemp = document.getElementById("mmr_column"+id).innerHTML; 
    alert(herotemp); 
} 

Есть моменты, когда вы хотите локальная (область видимости функции) переменную с именем x, а также глобальную переменную с именем x. Для достижения этой цели вам придется сделать следующее:

var x = 3; 

function useX() { 
    var x = 5; 
    alert(x, window['x']); 
} 

Или:

var x = 3; 

function useX(x) { 
    alert(x, window['x']); 
} 

Answer 2

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

для создания глобальной или использовать глобальную переменную просто удалить вар