首次输入正确ID时superheroname为undefined的原因解析

输入正确的用户名、年龄后，首次输入1-4范围内的合法superheroid，console.log输出的superheroname为undefined；但先输入错误ID（如9）再输入正确ID时，可正常显示超级英雄名称，请问该问题的原因是什么？

原代码 #

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);

  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)
  }
}

问题原因 #

核心问题是首次输入合法ID时，赋值superheroname的switch代码块从未执行：

• 当首次输入1-4的合法superheroid时，while循环的条件superheroid !== "1" && ... && superheroid !== "4"结果为false，循环直接跳过，不会进入循环体执行switch语句给superheroname赋值。此时superheroname只被声明未赋值，默认值就是undefined。
• 若先输入错误ID，循环条件成立，进入循环体重新弹出prompt获取ID；此时如果输入合法ID，switch语句会执行，给superheroname赋予对应英雄名称，随后console.log就能输出正确结果。

修复方案 #

把superheroname的赋值逻辑和循环校验分离，确保无论首次输入是否合法，都能执行赋值操作：

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

  let userdetails = {
    username: username,
    age: age
  };
  console.log(userdetails);

  // 英雄ID处理逻辑修改
  let superheroname;
  let superheroid = prompt("Enter a value between 1 to 4");

  // 复用赋值逻辑的函数
  function assignHeroName(id) {
    switch (id) {
      case "1":
        return "batman";
      case "2":
        return "superman";
      case "3":
        return "ratman";
      case "4":
        return "spiderman";
      default:
        return undefined;
    }
  }

  // 首次输入先赋值
  superheroname = assignHeroName(superheroid);

  // 循环校验，不合法则重新输入并赋值
  while (superheroid !== "1" && superheroid !== "2" && superheroid !== "3" && superheroid !== "4") {
    superheroid = prompt("Enter a value between 1 to 4");
    superheroname = assignHeroName(superheroid);
  }

  console.log(superheroname);
}

内容的提问来源于stack exchange，提问作者Dick long hart