Почему внешняя переменна не определяется внутри функции?

Подскажите пожалуйста в чем дело. Больше двух часов и я не могу понять почему происходит то, что происходит. Есть код:

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. Я понемаю его значение но не понимаю почему так? Ведь у функции есть доступ к внешним переменным. Да и ладно, на другом проекте похожий код работает как часы. Сам не могу разобраться подскажите пожалуйста что тут не так.