Problem using loop addeventlistener

Question

After creating a series of tags <button>, the idea was to change the color button if the user hovers the mouse on any of them. The problem is that it doesn’t work and I don’t know why. Can someone help me?

My Javascript code:

var buttons = document.getElementsByTagName("button") //vetor de 38 botoes

for(let i = 0; i < buttons.length; i++) //percorre o vetor buttons
{
    buttons[i].addEventListener("mouseover", destacaButton(buttons[i]), false) //adiciona um evento em cada button
}

function destacaButton(button)
{
    button.style.backgroundColor = black; //pinta o fundo de preto se passar o mouse
}

Answer 1

The addEventListener expects to receive a function in your second argument. However, note that you are calling for the function (before passing it to the addEventListener). Behold "Calling Functions" in the documentation to learn more.

Because of this, instead of passing the function to the addEventListener, you’re passing the return of the function you called. Since the function returns nothing, it is passing undefined.

You need to pass the function reference (the name, for example):

var buttons = document.getElementsByTagName("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("mouseover", destacaButton, false);
}

function destacaButton() {
  this.style.backgroundColor = "black";
}

Some modifications to the code:

• I transformed black in a string, like this: "black". Keep it the way it was (only the identifier black) would probably cause a ReferenceError.
• I changed the parameter button for this. When the addEventListener calls the function of callback, he associates the this function to the element that caused the event. In this case, it will be the button itself.

A functional example:

var buttons = document.getElementsByTagName("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("mouseover", destacaButton, false);
}

function destacaButton() {
  this.style.backgroundColor = "black";
}

<button>Botão 0</button> <button>Botão 1</button>
<button>Botão 2</button> <button>Botão 3</button>
<button>Botão 3</button> <button>Botão 5</button>
<button>Botão 6</button> <button>Botão 7</button>
<button>Botão 8</button> <button>Botão 9</button>

Answer 2

The addEventListener one function and not the call of your method, so is running that function the moment you assign;

The correct form would be:

  buttons[i].addEventListener("mouseover", function() {
    destacaButton(buttons[i]);
  });

That from ES6, with the support of anonymous functions can written as ()=>

buttons[i].addEventListener("mouseout", () => destacaButton(buttons[i]));

var buttons = document.getElementsByTagName("button") //vetor de 38 botoes

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("mouseover", function() {
    destacaButton(buttons[i]);
  });
  buttons[i].addEventListener("mouseout", () => restauraButton(buttons[i]));

}

let destacaButton = function(button) {
  button.style.color = 'white';
  button.style.backgroundColor = 'black';
}

let restauraButton = function(button) {
  button.style.color = '';
  button.style.backgroundColor = '';
}

<button>teste</button>
<button>teste</button>
<button>teste</button>
<button>teste</button>
<button>teste</button>

However... if the goal is just appearance the right thing would be to let CSS sort it out...