JS: input's .value returns an empty string (when not empty)

Question

I've been trying to get the value from a text input, but for some reason, it's not working.

Essentially, I have a text input. The user types inside of the input, and I'd expect the .value property to change (which chrome says it does), but when I click to save it, and read my JSON output, it returns as a blank string.

Here's the HTML for this bit:

<input id="eventName" name="efrm" type="text" value="" />
<button type="button" id="okEvent">Save Event</button>

Here's the JS that you'll need to see:

document.querySelector("#okEvent").addEventListener("mousedown", applyEvent(event), false);

function applyEvent(event) {
    var eventName = document.querySelector("#eventName").value;

    event.data = {
        name: eventName,
        img: null,
        type: 1,
        fov: 0,
        orientation: 1,
        trigger: 1
    };
}

The JSON output says that the name property of the event.data object is an empty string, though. I'm really not understanding what's going on here.

Answer 1

You are calling applyEvent immediately and pass the return value to addEventListener (which is undefined). Since the input element doesn't have a value yet at that moment, .value will return an empty string.

Pass a function instead:

....addEventListener("mousedown", function() {
    applyEvent(event);
}, false);

(I don't know where event is coming from in your code, but I assume it is a custom object, not the actual event object).