Область видимости переменной Javascript и обработчики событий

Question

У меня есть обработчик событий и функции, используемые для добавления элементов в список и удаления элементов из списка. Моя первая функция (обработчик) работает с элементами btn, которые хранятся в локальной переменной для функций. Если я попытаюсь сделать то же самое с кнопкой удаления, я получу опорную ошибку в инструментах dev. Если я переместю переменную, которая вытаскивает кнопку удаления из функции и делает ее глобальной, тогда она работает. Почему одна функция работает с переменной для кнопки, установленной в функции, а другая - нет. Вот мой код. Переменные в вопросе прокомментированы

var handler = function(event){ 

    //this btn variable does work when declared inside handler function 

    var btn = document.getElementById('btn'); 
    var input = document.getElementById('input').value; 
    var item = document.createElement('li'); 
    var list = document.getElementById('list'); 
    var x = document.createElement('button'); 
    item.innerHTML = input; 
    list.appendChild(item); 
    item.appendChild(x); 
}; 
//This dlt variable doesn't work if declared in function remove 

var dlt = document.getElementById('delete'); 

var remove = function(event){ 
    var list = document.getElementById('list'); 
    var item = document.querySelector('li'); 
    list.removeChild(item); 
}; 

btn.addEventListener('click', handler); 
dlt.addEventListener('click', remove); 

Answer 1

Ссылаясь на btn работает только случайно.

Это не относится к переменной, которая объявлена ​​внутри функции handler, это относится к глобальной переменной btn, который автоматически создается потому, что у вас есть элемент с ID btn. См. Do DOM tree elements with ids become global variables? для получения дополнительной информации.

Вы можете легко проверить это, изменив имя переменной на var button = document.getElementById('btn'); и button.addEventListener('click', handler);. Вы заметите, что это тоже не сработает.

У JavaScript есть область функций, поэтому каждая переменная, объявленная (var foo;) внутри функции, не может быть доступна извне функции.

Answer 2

здесь немного пример того, как прицелы работы в JS:

Начнем код ...

Вы увидите в вас JS консоли:

>1: world 
>2: hello 

Однако если вы измените одну простую вещь: Удалите «var» перед i

var i = "hello"; // Defined global var to "hello" 

function test(){ // Define Function to test scope 
    i = "world"; // This will overwrite the global var with "world" 
    console.log("1: "+i); // will also give "world" back 
} 

test(); 

console.log("2: "+i); // Will give "world" back 

Давайте начнем код ...

Вы увидите в вас JS консоли:

>1: world 
>2: world 

Надеется, что это помогло вам;)

С наилучших пожеланиями

Dustin