Este script es para el creador de avatares. Al principio, elige género masculino/femenino y luego puede hacer clic en 2 botones, siguiente o anterior. Obtuve 3 imágenes para cada género, pero cuando, por ejemplo, eligió masculino, luego hizo clic 2 veces a continuación y luego cambió el género a femenino, ¿cómo puedo restablecer la variable de la función para que comience en la primera imagen y no en la tercera? Hablo de la función avatarImageDisplay(elem). Gracias.

 //Set variables const btnsGender = document.querySelector('.btn-avatar'); const radioGenders = document.querySelectorAll('input[name="gender"]'); const avatarPrevious = document.querySelector('button[value="previous"]'); const avatarNext = document.querySelector('button[value="next"]'); const avatarImage = document.querySelector('img[value="avatarImage"]'); var avatarI = 1; //Default value for (const radioGender of radioGenders) { if (radioGender.checked) { selectedGender = radioGender.value; console.log(selectedGender); break; } } //If input with name gender is clicked it returns gender value radioGenders.forEach(radioGenders => { radioGenders.addEventListener("click",() => { selectedGender = radioGenders.value; console.log(selectedGender); avatarDisplay(1); avatarImageDisplay(1); return selectedGender; }); }); //Set images when click next or previous function avatarDisplay(i) { if (selectedGender === "male") { avatarImage.src = "/images/avatar/male/avatar-" + i + ".png"; } else { avatarImage.src = "/images/avatar/female/avatar-" + i + ".png"; } } function avatarImageDisplay(elem) { if (elem.value === "next") { if (avatarI < 3) { avatarI++; console.log(avatarI); avatarDisplay(avatarI); return avatarI; } else { return false; }; } else if (elem.value === "previous") { if (avatarI > 1) { avatarI--; console.log(avatarI); avatarDisplay(avatarI); return avatarI; } else { return false; } } else { return false; } };