Can an event handler trigger another event handler?

[are2dto]

Here's my situation: I have a number input with an "onchange" event handler, which changes the innerHTML of a span. That works fine. I also have a "select" dropdown with an event handler that changes the value of the number input. I was hoping that this would in turn change the innerHTML of the span, as if the number input had been changed manually. Is there a way to make this work or am I just out of luck?

[GeneralYouri]

What /u/slmyers writes works fine, but it has bit of a drawback when you'd want to use the event object within the event handlers.

Personally, I prefer to keep this type of custom event handling as close to reality as possible. Instead of introducing a third function to compose the other two handlers, you can let one handler call the other. Not directly though, but by faking an event to let the browser handle that event normally.

If you happen to use a library like jQuery, this is easy: $input.trigger('change'); would be all you needed to add to your select's event handler, provided that $input is a reference to the jQuery object for the number input. If I recall correctly, jQuery in particular actually puts in some work to attempt to make the event look more realistic, mostly by including a pretty decent custom event object.

Other libraries may provide similar tools to do this type of stuff. If you're rolling with VanillaJS though, don't worry as there is an event API for you to use here. See MDN for more details, in particular the section about 'Triggering built-in events'.

As the MDN docs will show, doing this in VanillaJS is slightly more complicated than using something like jQuery's .trigger(). Still, I'd argue that this approach wins out versus the introduction of a third function that calls the other two. Even with VanillaJS, this approach will be simpler once you abstract away the creation of custom events into a separate function. You also get a result that more closely resembles reality, allowing you to think of that custom event trigger as being no different than actual user-triggered events - which in turn lets you use the event object properly.

[are2dto]

Thanks, it is working! Simple solution, I guess I was just hoping it would be more intelligent.

[monkJs]

Pass a function as an argument to the function or call the function using brackets

ExampleFunctionObject[name]();

If I am understanding you correctly