only my else if and else statements get evaluated, my if statement not

Question

I am making 2 buttons, one should be a white theme, one should be a black theme, these will be send to my database. However when it should evaluate my if statement and execute the part inside the curly braces, it throws in an error "Uncaught ReferenceError: data is not defined".

I have already used console.log(), and everything seems to be working. I have looked up other problems related to if/else if/else statements not working etc. but none of them were useful (to me).

How the buttons are created:

function whiteOrDarkTheme(id, value, text, classColor, tracker) {
let a = ($('<a/>', {
    class: classColor + ' blackOrWhiteThemeBtns',
    id: id,
    value: value
})).text(text).on('click', function() {
    if ($(this).attr('id') === 'darkTheme') {

            $('#whiteTheme').val('NotChosen');
            $(this).val('#282c34');
            console.log($(this).val());
            console.log($('#whiteTheme').val());

    } else if ($(this).attr('id') === 'whiteTheme') {

            $('#darkTheme').val('NotChosen');
            $(this).val('#ffff');
            console.log($(this).val());
            console.log($('#darkTheme').val());
    }
});
return a;
}

How my ajax call looks like:

function registerCall() {
$('#signup').submit(function(event) {
    event.preventDefault();
    let loginName = $('#registerInput').val();
    let userName = $('#userName').val();
    let pwd = $('#registerPWD').val();
    let confirmPWD = $('#confirmPWD').val();
    let submit = $('#registerBtn').val();
    let backgroundChooser = $('#backgroundChooser').val();
    let whiteTheme = $('#whiteTheme').val();
    let darkTheme = $('#darkTheme').val();

    if (whiteTheme === 'NotChosen') {
            let data = {
                    loginName: loginName,
                    userName: userName,
                    pwd: pwd,
                    confirmPWD: confirmPWD,
                    theme: darkTheme,
                    submit: submit
                }
        } else if (darkTheme === 'NotChosen') {
             data = {
                loginName: loginName,
                userName: userName,
                pwd: pwd,
                confirmPWD: confirmPWD,
                theme: whiteTheme,
                submit: submit
            }   
        } else {
             data = {
                loginName: loginName,
                userName: userName,
                pwd: pwd,
                confirmPWD: confirmPWD,
                theme: '#ffff',
                submit: submit
            }               
        }
        console.log(data.theme);

    $.ajax({
        url: 'signup.php',
        type: 'POST',
        data: data,
        success: function(response) {

        }
    });
});
}

The part I bump into:

    if (whiteTheme === 'NotChosen') {
            let data = {
                    loginName: loginName,
                    userName: userName,
                    pwd: pwd,
                    confirmPWD: confirmPWD,
                    theme: darkTheme,
                    submit: submit
                }
        }

Answer 1

I believe this is an issue with lexical scope . Your defining the variable data within the first if block, but then using it outside of that block when making a request.

 if (whiteTheme === 'NotChosen') {
            let data = {
                    loginName: loginName,
                    userName: userName,
                    pwd: pwd,
                    confirmPWD: confirmPWD,
                    theme: darkTheme,
                    submit: submit
                }
        }

I would recommend moving the declaration of data to be above your if block, like:

...
let whiteTheme = $('#whiteTheme').val();
let darkTheme = $('#darkTheme').val();
let data;

if (whiteTheme === 'NotChosen') {
    data = { ...

Answer 2

Michael Camden is right - it's to do with scope, I'd simplify your code

function registerCall() {
    $('#signup').submit(function(event) {
        event.preventDefault();
        let loginName = $('#registerInput').val();
        let userName = $('#userName').val();
        let pwd = $('#registerPWD').val();
        let confirmPWD = $('#confirmPWD').val();
        let submit = $('#registerBtn').val();
        let backgroundChooser = $('#backgroundChooser').val();
        let whiteTheme = $('#whiteTheme').val();
        let darkTheme = $('#darkTheme').val();

        let data = {
            loginName: loginName,
            userName: userName,
            pwd: pwd,
            confirmPWD: confirmPWD,
            submit: submit
            theme : '#ffff'
        }

        if (whiteTheme === 'NotChosen') {
            data.theme = darkTheme;

        } else if (darkTheme === 'NotChosen') {
            data.theme = whiteTheme;

        }

        console.log(data.theme);

        $.ajax({
            url: 'signup.php',
            type: 'POST',
            data: data,
            success: function(response) {}

        });

    });

}