Estoy escribiendo un código javascript para crear un sistema de tarjetas flash. En este sistema, se muestra una tarjeta al usuario y él decide si la tarjeta es fácil o difícil. De esta manera, cada tarjeta se clasifica en dos grupos diferentes que se utilizarán más adelante. Para el siguiente código, arr es la lista de tarjetas mientras que la lista difícil y la lista fácil son las dos listas. También he usado jquery para ejecutar una función según la clase. Entonces, si se hace clic en el botón con la tarjeta flash difícil, se cambia la lista difícil. Tenga en cuenta que, a partir de ahora, la función end() simplemente registra 'FIN' en la consola. Finalmente, la variable de texto utilizada en nada más que un elemento HTML con id de texto cuyo valor se cambia para mostrar la pregunta.

 function mainFunc() { if (indexVal > arr.length) { end(); } else { console.log(indexVal); text.innerHTML = arr[indexVal][0]; $(".difficult").click(function () { indexVal += 1; difficultList.push(arr[indexVal]); mainFunc(); }) $(".easy").click(function () { indexVal += 1; mainFunc(); easyList.push(arr[indexVal]); }) } } mainFunc();

Cuando el código se ejecuta por primera vez, todo funciona bien. Pero cuando hago clic en cualquiera de los botones durante la segunda tarjeta flash, se produce un error y el valor de indexVal aumenta en 2 en lugar de 1, lo que provoca un comportamiento inesperado. Hice varios intentos para depurar el código, pero fue en vano. Cualquier ayuda sería muy apreciada (el problema con el código, una nueva solución, etc.). ¡Gracias!