This script is for avatar creator. At first you choose gender male/female and then you can click 2 buttons, next or previous. I got 3 images for each gender, but when you for example choosed male then clicked 2times next and then change the gender to female how can I reset function's variable so you start at first image not third? I talk about function avatarImageDisplay(elem). Thanks.

//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;
  }
};