如何将内联 onclick 函数编写为 es6 箭头函数？

Question

If this is duplicate let me know, but I see similar questions for react environment but not for pure html+js.

The question is, I write js function as html onclick property and it is working :

<button onclick="function myFunction(){ alert('hi')} myFunction();">Hi</button>

But I can't write arrow function as html onclick prop like that :

<button onclick="()=>alert('hi')">Hi</button>

It is possible or not?

Answer 1

In the first example you assign a function to myFunction and then explicitly call myFunction .

In the second example you create a function, but you don't assign it anywhere, and you don't call it.

You could …

onclick=" const myFunction = ()=>alert('hi'); myFunction() "

… but it is as completely pointless (and hard to read) as the first example.

---

There is no reason, in the scope of an onclick function or any other function to create a function and then call it once, immediately.

---

Just make the body of the onclick function do that directly:

onclick="alert('hi')"

Better yet, assign your event handlers using JavaScript:

document.querySelector("button")
    .addEventListener("click", () => alert("hi"));

Answer 2

You have to wrap it in parentheses and call it like an anonymous function in this way:

<button onclick="(() => alert ('hi'))()">Hi</button>

This is exactly how you would call an anonymous conventional function inline:

<button onclick="(function() { alert ('hi') })()">Hi</button>

The reason for this is, currently you've just declared a function, and every time you click, the function is declared but never called. With the adjustment in my answer, you define it and execute it each time a button is clicked.

Answer 3

Yes, it is possible. Just adjust parantheses, and you dont't need to define another function actually :

<button onclick="(()=>alert('hi'))();">Hi</button>