You are misunderstanding the event handlers.
Javascript has asynchronous nature, so (in normal cases) there is no "waiting" for an event.
You register an eventhandler like your click()
and then the function is executed when (eventually) a click on that element is registered. In the meantime the execution of the rest of your code goes on.
If you want to make your code dependent on the click, you have to write this code into the function of the click handler or pass a callback to the function.
Registering Event-Handlers is a one-time process and has to be done outside your function - at the moment you are registering a new click-handler every time you call launchPopUp
. E.g. if you are calling launchPopUp
five times, your code
input = document.getElementById('txtData').value;
if (input != "") {
ok = "yes";
$(ID).css('fill', 'green');
closePopUp();
}
also gets executed five times as soon as you click on #btnSubmit
.
Basically you have to structure your code like the following:
- register eventhandler for
#btnSubmit
- define what is happening when the button is clicked in this function (evaluation of your inputs) - write the
launchPopUp
function which gets eventually executed. No eventhandler in here and no evaluation code onbtnSubmit
this is all done in your eventhandler.