why the first get undifined and after the wrong condition only the superheroname works?

Question

document.getElementById("btn1").onclick = function() {
  let username;
  let age;

  while (true) {
    username = prompt("Enter name please");

    if (!isNaN(username)) {
      alert("Please enter a valid username without numbers");
      continue;
    }

    if (username.length < 3 || username.length > 8) {
      alert("Please enter a name between 3 to 8 characters");
      continue;

    }

    age = prompt("Enter age:");

    if (age < 5 || age > 120 || isNaN(age)) {
      alert("Age should be a number and bigger than 5 or smaller than 120");
      continue;
    }

    break; // Break out of the loop if all conditions are met
  }

  let userdetails = {
    username: username,
    age: age
  };

  console.log(userdetails);

  //superheroid = prompt("enter ID 1,2,3");

  let superheroname;
  let superheroid = prompt("Enter a value between 1 to 4");

  while (superheroid !== "1" && superheroid !== "2" && superheroid !== "3" && superheroid !== "4") {

    superheroid = prompt("Enter a value between 1 to 4");

    switch (superheroid) {
      case "1":
        superheroname = "batman";
        break;
      case "2":
        superheroname = "superman";
        break;
      case "3":
        superheroname = "ratman";
        break;
      case "4":
        superheroname = "spiderman";
        break;
    }
    console.log(superheroname)
  }

the user enter name its works the user enters age it works the user enter ID between 1-4 the console log is undefined . but if he first enters wrong id and after enters correct id the its shows the superhero name . whats the problem ? can someone explain me in the easiest ? thank you guys

i enterd correct name also corrcet age and also correct ID but the result is undefined . but if i enter correct name and age an wrong ID like = 9 its ask again to enter valid id the i enter the the super hero name is not undefined . why this is like this