Stack Exchange
Почему внешняя переменна не определяется внутри функции?
Подскажите пожалуйста в чем дело. Больше двух часов и я не могу понять почему происходит то, что происходит. Есть код:
const modalOverlay = document.querySelector('.modal-overlay');
const successSent = document.querySelector('.success-sent');
onst formSubmitBtn = document.getElementById('contact-form-btn');

if(formSubmitBtn !== null){

formSubmitBtn.addEventListener('click', function(){

    const userName =  document.getElementById('username').value;
    const userPhoneNumber = document.getElementById('userphone').value;
    const userEmail = document.getElementById('usermail').value;
    const userMessage = document.getElementById('usermessage').value;

    data = {
        'action': 'vicso_send_message',
        'username': userName,
        'userphone': userPhoneNumber,
        'usermail': userEmail,
        'usermessage': userMessage
    }

    jQuery.ajax({
        type: 'post',
        url: object_url.url,
        data: data,
        cache: false,
        success: function(data){
            let objecData = JSON.parse(data);
            let sentResult = objecData.contact_form;
            if(sentResult == true){
                modalOverlay.classList.add('active'); //здесь ошибка
                successSent.classList.add('active');
            }
        }
    })
 });

 }

Выполнение доходит до modalOverlay.classList.add('active'); и консоль "радует" сообщением: Uncaught TypeError: Cannot read property 'classList' of null. Я понемаю его значение но не понимаю почему так? Ведь у функции есть доступ к внешним переменным. Да и ладно, на другом проекте похожий код работает как часы. Сам не могу разобраться подскажите пожалуйста что тут не так.

Вы проверяли а не null ли эта переменная вне eventListener'a? Ибо когда "не определяется" это undefined

Действительно, только что проверил == null. А внутри EventListener есть значение. Но почему так??? Я реально не понимаю, просто вот не пойму. И, если поместить:
const modalOverlay = document.querySelector('.modal-overlay');
const successSent = document.querySelector('.success-sent'); внутрь EventListener
то все работет.

@InDevX Спасибо вы меня на верную мысль навели. Я разобрался и дело было не в js (я просто не мог понять почему нарушается принцип доступности переменных). Просто я разместил html блок после вызова скрипта. Мда. ну ничего - пятница.

@VictorSokoliuk, Просто я разместил html блок после вызова скрипта. - ну по сути дело как раз в js - скрипт выполнялся раньше чем был доступен блок ¯\(ツ)/¯

@Grundy Могу согласиться только частично. Речь идет о том, что меня выбило из колее само наличие ошибки которая, как мне казалось нарушает принцип доступности переменной из функции. А в результате просто невнимательность в конце рабочей недели.
