JavaScript programmatically set onchange event

Question

function __setOnchangeEvent()
{
    var inputs = document.getElementsByTagName('input');
    if (inputs)
    {
        for (var i = 0; i < inputs.length; i++)
        {
            if (inputs[i].id.indexOf('display_hidden') >= 0)
            {
                console.debug("outer1: " + inputs[i].outerHTML);
                //inputs[i].addEventListener("onchange", __hideInfoIcon);
                inputs[i].onchange = '__hideInfoIcon';
                console.debug("outer2: " + inputs[i].outerHTML);
            }
        }
    }
} __setOnchangeEvent();

Debug output:

The debug output clearly shows that the onchange value is not getting set.

Where is my mistake?

score 2 · Answer 1 · answered May 13 '16 at 16:35

2

The debug output clearly shows that the onchange value is not getting set.

No it doesn't. The debug output just shows HTML, because that's what you're showing:

console.debug("outer2: " + inputs[i].outerHTML);

If you're expecting to see the HTML change in some way just because you're setting an event handler, then you are mistaken. HTML and DOM events are two different things.

You can assign an event handler in in-line HTML, but the event itself isn't part of the HTML display.

You would test the event handler by invoking that event, not by looking at the HTML markup.

Where is my mistake?

Aside from the above, this doesn't look right either:

inputs[i].onchange = '__hideInfoIcon';

That's not a function, it's just a string. If you have a function by that name, use it as the event handler:

inputs[i].onchange = __hideInfoIcon;

answered May 13 '16 at 16:35

David

208,112
36
198
279

I took the quotes off inputs[i].onchange = __hideInfoIcon; When I inspect the element, the onchange function still isn't there. – Zyre May 13 '16 at 16:51
@Zyre: How are you "inspecting the element"? Is the change event not actually being handled by the function? Is there an error in the JavaScript console? When you debug, is the function executed? It sounds like you still expect the *HTML itself* to be changing, which isn't going to happen. Other than your incorrect assumption, is this *actually failing* in some way? – David May 13 '16 at 16:55
I'm inspecting the element via Chrome "inspect element". No, the change event is not firing at all. The __hideInfoIcon function, for now, is a simple alert (for testing). The alert pops up when the form loads (not sure why though because i'm assigning the function to the element's onchange, not firing it), but it never fires when the input field actually changes. – Zyre May 13 '16 at 17:04
@Zyre: You may want to open a question with code which replicates the problem you're seeing then, because it seems reasonable based on your last description that there's some mistake in how the event handler was being created and assigned to the event. The current question doesn't show the event handler function at all, and is asking a very different question. – David May 13 '16 at 17:06
Understood. Thank you though for taking the time to help. Your comments and guidance is appreciated. – Zyre May 13 '16 at 17:07
I would just like to point out that I found the issue. The input type is "hidden", and onchange event only fires when the field loses focus... thus, never firing the __hideInfoIcon() function. I need a way to set an event listener to the hidden input field when the value gets changed. – Zyre May 13 '16 at 17:30
@Zyre: http://stackoverflow.com/questions/1003053/does-html-hidden-control-have-any-events-like-onchange-or-something (among others). Events are UI-level things, so if there's no UI in this case then there's no event. Though it seems you can *manually* trigger the event in your code. Though there may be a better way to accomplish whatever it is you're actually trying to accomplish. – David May 13 '16 at 17:32

JavaScript programmatically set onchange event

1 Answers1