onchange of DOM in Javascript not working

Question

var nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.className = "loop_input";
nameInput.id = "nameAddress"+validLoadedEmails;
nameInput.value = data[0];
nameInput.onchange = editAddressHidden(validLoadedEmails);

it seems that when creating the element. It will already go to the editAddressHidden function and not when there's a change.

Answer 1

Given your current code:

nameInput.onchange = editAddressHidden(validLoadedEmails);

You can think of this as saying "handle the onchange event of nameInput with whatever's returned from my editAddressHidden function". But that's not right (in this instance), as you want to handle the onchange event with the editAddressHidden function itself.

So wrap it up in an anonymous function:

nameInput.onchange = function(){ editAddressHidden(validLoadedEmails) };

Now every time the onchange event fires, it will invoke your function, and this will in turn call the editAddressHidden function.

Answer 2

Use this

nameInput.onchange = function(){ editAddressHidden(validLoadedEmails) };

Because you call editAddressHidden function and assign returned value as input's change handler, that is not what you wanted.