[SOLVED] HTML & JS: Set function name and listen to an event at the same time

Question

How to set function name to arrow function along with setting event on the button...
Sample Code👇
Here I want to fadeOut() the html container on button click and also return the value at the same time when clicking that button.
How can I do that;

submitInputButton.onclick = inputByUser() => {
userInputs = userInputBox.value;
fadeOut(codeInput);
return userInputs;
}

input = inputByUser().......

Or how can I do the same in easier way.

Answer 1

That's wrong syntax for arrow functions.

Following is solution for what you're asking but I'd suggest to define that function separately.

//When you click window it triggers function
window.onclick = myFunc = () => {
console.log('mhm');
}

//You can access it with name from somewhere else.
myFunc();

Answer 2

You can't pass argument like that to event listener handler.

It always takes event as first argument, this is why I don't recommend using event handler as normal function.

Answer 3

RDC thanl you for the syntax.
Got few problems(confusions may be):
1. The code is working without clicking the button, but not after clicking the button.(I.e. printing text on console)
2. https://code.sololearn.com/Wddn924Pzc3y/?ref=app

Answer 4

Ok, I was thinking my function to do multitasking 😂
But no problem, I got what I was asking for,
Thank you RDC 🙏