Question

54

How to write inline onclick function as es6 arrow function?

rated 0 times [ 60] [ 6] / answers: 1 / hits: 7464 / 4 Years ago, thu, november 12, 2020, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kieraelsies

Add To Favorites

Follow

Total Points: 718

Total Questions: 103

Total Answers: 104

Location: England

Member since Sun, May 21, 2023

1 Year ago

kieraelsies questions

1 How do I change text color in SweetAlert2?

Tue, Aug 3, 21, 00:00, 3 Years ago

1 Tailwind Custom Colors Not Complied

Tue, Feb 23, 21, 00:00, 3 Years ago

1 How to remove all roles from an user discord.js v12?

Wed, Sep 9, 20, 00:00, 4 Years ago

1 PlusMinus Challenge

Mon, Sep 16, 19, 00:00, 5 Years ago

1 Where is the monaco-editor autocompletion located?

Fri, Sep 13, 19, 00:00, 5 Years ago

View All

answered 4 Years ago grant · Accepted Answer

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.