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>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>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>