Actualmente, estoy agregando 1 al índice al hacer clic, para simular una iteración controlada por el usuario de la matriz. Tengo una declaración condicional donde si i > longitud, i = 0; Sin embargo, sigo sin definirme después de llegar al final de la matriz.

 const marqueeMonthlies = () => { intervalId = setInterval(() => { insertMarquee.empty(''); // i %= marqueeMonthlyPlates.length insertMarquee.append( `<div class="container" id="generatedMonthlyPlates"> <input type="text" width="100px" name="monthlyLicensePlate" id="${marqueeMonthlyPlates[i]}" class="licensePlate" placeholder="AB12345" value="${marqueeMonthlyPlates[i]}"/> </div>` ) // i++; }, 5000); } const getNextMonthly = () => { if ( i < marqueeMonthlyPlates.length) { i = i+1 return marqueeMonthlyPlates[i] } else if (i > marqueeMonthlyPlates.length){ i = 0; return marqueeMonthlyPlates[i]; } else if (marqueeMonthlyPlates.length === undefined ){ i = 0; return marqueeMonthlyPlates[i]; } }

Traté de detectar cuando no está definido presente, para volver a establecer el índice en 0, pero solo se corrige solo cuando se agrega 1 a i nuevamente en otro clic. ¿Qué estoy haciendo mal aquí?