• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

150
Vistas
El valor de la variable no se actualiza cuando se devuelve

No puedo entender por qué no se actualiza un número entero. He agregado detectores de eventos a clases específicas y una vez que paso el mouse sobre ellos, el índice debería actualizarse.

Ese no es el caso. El registro de la consola sigue repitiendo que el índice antiguo: 0, el índice nuevo es 1. Una vez que paso el cursor por el siguiente elemento, repite que el índice antiguo es 0 y el índice nuevo es 1 (el valor del índice no se actualiza).

Cualquier ayuda sería muy apreciada. Gracias

 var index = 0; var indexArray = ["1", "2", "3"]; function addListeners() { let eListeners = document.querySelectorAll(".eListener"); for (let i = 0; i < eListeners.length; i++) { eListeners[i].addEventListener("mouseover", function() { indexPlus(index) }); } } function indexPlus(index) { if (index == 2) { console.log("Old index: " + index); index = 0; console.log("New index: " + index); return index; } else { console.log("Old index: " + index); index = index + 1; console.log("New index: " + index); return index; } } addListeners();
 <span class="eListener">Some text1</span> <span class="eListener">Some text2</span> <span class="eListener">Some text3</span> <span class="eListener">Some text4</span> <span class="eListener">Some text5</span> <span class="eListener">Some text6</span>

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Está modificando el index del parámetro de la función indexPlus , no su variable index global.

Para lograr eso, debe asignar el valor de retorno de indexPlus para index dentro de sus oyentes. Para que quede más claro, he cambiado el nombre del parámetro de función a idx .

Últimas cosas: he acortado su cheque dentro de la función ìndexPlus`:

En lugar de verificar 2 y luego restablecer a 0 , y de lo contrario incrementar, puede utilizar el operador restante % :

 idx = ++idx % 3;

Eso es cuestión de qué tan cómodo te sientas con eso. No hay nada de malo en que sus cheques permanezcan de la forma en que los implementó.

También he refactorizado su bucle basado en índices a un bucle for...of que es el preferido porque mejora la legibilidad.

 let index = 0; let eListeners = document.querySelectorAll(".eListener"); function addListeners() { for (const eListener of eListeners) { eListener.addEventListener("mouseover", function() { index = indexPlus(index) }); } } function indexPlus(idx) { console.log("Old index: " + idx); idx = ++idx % 3; console.log("New index: " + idx); return idx; } addListeners();
 <span class="eListener">Some text1</span> <span class="eListener">Some text2</span> <span class="eListener">Some text3</span> <span class="eListener">Some text4</span> <span class="eListener">Some text5</span> <span class="eListener">Some text6</span>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

En la función indexPlus , use un nombre diferente para su parámetro, no el index , ya que ya está definido globalmente

 var index = 0; var indexArray = []; function addListeners() { let eListeners = document.querySelectorAll(".eListener"); for (let i = 0; i < eListeners.length; i++) { //indexArray[i] = 0; eListeners[i].addEventListener("mouseover", function() { indexPlus(index) }); } } function indexPlus(ind) { if (ind == 2) { console.log("Old index: " + index); index = 0; console.log("New index: " + index); } else { console.log("Old index: " + index); index = index + 1; console.log("New index: " + index); } } addListeners();
 <span class="eListener">Some text1</span> <span class="eListener">Some text2</span> <span class="eListener">Some text3</span> <span class="eListener">Some text4</span> <span class="eListener">Some text5</span> <span class="eListener">Some text6</span>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda