es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Quiero mantener un bucle ‘for’ en un escuchador de eventos para poder enviarlo como un parámetro para una función.

Quiero mantener un bucle ‘for’ en un escuchador de eventos para poder enviarlo como un parámetro para una función.

02 Aug, 2023 Programación

Estoy intentando cambiar la imagen de fondo dependiendo del símbolo que se esté seleccionando, pero cuando intento retornar changebackground([i]) siempre retorna un arreglo con longitud 1 y el número 0.

¿Cómo puedo hacer para que retorne el número del símbolo que se está seleccionando? Por ejemplo, si se selecciona el segundo símbolo, quiero que retorne checkbackground([1]) a la función changebackground(logo). Puedes ver los símbolos aquí para tener una idea.

A continuación se muestra mi código:

let background = document.getElementById("main_home_container");
let factionlogo = document.getElementsByClassName("home_image");

for (let i = 0; i < factionlogo.length; i++) {
  factionlogo[i].addEventListener("mouseenter", function() {
    changebackground([i]);
  });
  factionlogo[i].addEventListener("mouseleave", revertbackground);
}

function changebackground(logo) {
  if (logo == 0) {
    background.style.backgroundImage = 'url("/Img/bg1.png")';
  } else if (logo == 1) {
    background.style.backgroundImage = 'url("/Img/bg2.png")';
  }
}

function revertbackground() {
  background.style.backgroundImage = 'url("/Img/home.png")';
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que devuelva el número del símbolo sobre el que se pasó el mouse, puede usar el método indexOf para obtener el índice del elemento sobre el que se pasó el mouse dentro del arreglo factionlogo. Luego, pase ese índice a la función changebackground.

    Aquí está el código actualizado:

    let background = document.getElementById("main_home_container");
let factionlogo = document.getElementsByClassName("home_image");

for (let i = 0; i < factionlogo.length; i++) {
  factionlogo[i].addEventListener("mouseenter", function() {
    // obtener el índice del elemento actual
    let index = Array.prototype.indexOf.call(factionlogo, this);
    changebackground(index);
  });
  factionlogo[i].addEventListener("mouseleave", revertbackground);
}

function changebackground(logo) {
  if (logo == 0) {
    background.style.backgroundImage = 'url("/Img/bg1.png")';
  } else if (logo == 1) {
    background.style.backgroundImage = 'url("/Img/bg2.png")';
  }
};

function revertbackground() {
  background.style.backgroundImage = 'url("/Img/home.png")';
};

    En este código, estamos utilizando Array.prototype.indexOf.call(factionlogo, this) para obtener el índice del elemento actual dentro del arreglo factionlogo. Luego, pasamos ese índice a la función changebackground.

Comments are closed.