Javascript: element onchange event async/await callback

Question

I hope this question is not duplicated. I have two HTML elements, one which when it's changed must populate the value of another via an async method named foo() .

The following code works :

<input type="text" id="elem">
<input type="file" onchange="
    (async ()=>{
       document.getElementById('elem').value = await foo(this);
    })()
">

The following one doesn't (no exception is thrown in console, and #elem is not updated):

<input type="text" id="elem">
<input type="file" onchange="
   async ()=>{
      document.getElementById('elem').value = await foo(this);
   }
">

Why the first example works and the second doesn't?

Answer 1

(function() {...})() This invokes the function. it's like invoking a named function someFunction()

in your second example you're just creating a function without invoking it. it returns the function itself.

1. invoking:

onchange='someFn()'; // calls function

2. without invoking

onchange='someFn'; // returns function.

Answer 2

The first example is what is known as a self invoking function . This is why is is wrapped in () and is followed by () to call the function immediately.

The second answer isn't working because you are not actually calling it. Simply add "const myFunc = async () => {}" and call "myFunc" on the button click.