Why function starts when the page is loaded?

Question

Hi!
I don't understand why my function "change" starts when the page is loaded, if I don't go with mouse over label...

https://code.sololearn.com/WrI3LNuXKU95

I've think to use array to add the Event Listener to each element, without write onmouseover="change();" it's possible?

Answer 1

You're calling the function when adding the event listener. Remove the parentheses and the array variable and just provide the name of the function. The function will receive the event not the element so change element to event as the function parameter. Then add the line
let element = event.target;
Afterwards your code will work.

Here is a much more modified version of your code.
https://code.sololearn.com/WIin09jmB0WC/?ref=app

Answer 2

You can just pass the function name without its parentheses or arguments. The function is a callback function which means its use is already defined with the method you're passing it to and the method will handle the passing of the arguments. It's also very common to pass an anonymous function or a lambda.

function myfunc(arg) {}
or
var myfunc = function(arg) {};

elm.addEventListener(event, myfunc);
//NOT! elm.addEventListener(event, myfunc(arg));
is also valid

Answer 3

ChaoticDawg Thank'u!

Answer 4

Thank to everybody!
So i can't call a function with argument without using "(argument) => "?
I've understand?