Why is jQuery .val() returning nothing?

I am trying to get the value of an input. Here is what my form looks like:

enter image description here

This is the HTML for it:

<label for="userName"></label>
<input type="text" class="form-input plain-text" id="userName" placeholder="Username">

Here is the jQuery to get its value and log it:

$("#loginSubmit").click(function() {
    var userName = $("#userName").val();
    console.log(userName);
});

But when I type in some text and hit the login button that has the id #userName, the console returns this:

enter image description here

Why does this not output dwedwed in the console?

Thanks