基于屏幕标题设置变量可行吗？（Code.org JavaScript实现）

问题背景 #

我在Code.org上开发多屏应用时，发现屏幕导航按钮需要重复编写结构相似、仅参数不同的onEvent代码，比如：

onEvent("nextButton1", "click", function(){
   setScreen("person1");
});

onEvent("nextButton2", "click", function(){
   setScreen("person2");
});

尝试用全局变量i统一逻辑减少冗余：

var i = 1;

onEvent("button" + i, " click", function(){
   setScreen("person" + i);
   i++; //等价于i = i + 1
});

但这段代码只对第一个屏幕生效，因为全局变量i更新后无法同步绑定后续的onEvent。如果把i设为局部变量，又会导致onEvent的元素ID未定义。

希望通过识别当前所在屏幕来设置变量i，用条件判断逻辑实现统一导航。

可行实现方案 #

方案1：从屏幕名称提取编号动态跳转 #

不需要维护全局变量，直接从当前屏幕名称中提取数字编号，计算目标屏幕：

// 批量绑定所有导航按钮（假设按钮ID是nextButton1、nextButton2...）
for(var j = 1; j <= 3; j++){
  onEvent("nextButton" + j, "click", navigateNext);
}

function navigateNext() {
  var currentScreen = getScreen();
  var currentNum = 0;
  // 根据当前屏幕名称匹配编号
  if(currentScreen === "homeScreen"){
    currentNum = 0;
  } else if(currentScreen.startsWith("user")){
    // 从user1、user2中提取数字
    currentNum = parseInt(currentScreen.replace("user", ""));
  }
  // 跳转到对应person屏幕
  setScreen("person" + (currentNum + 1));
}

方案2：用自定义属性关联目标屏幕 #

在Code.org设计界面给每个导航按钮添加自定义属性（比如命名为targetScreen），属性值设为要跳转的屏幕名称（如person1、person2），然后统一绑定事件：

// 批量绑定按钮
for(var j = 1; j <= 3; j++){
  onEvent("nextButton" + j, "click", function() {
    // 获取当前按钮的自定义属性值
    var targetScreen = getProperty(this.id, "targetScreen");
    setScreen(targetScreen);
  });
}

这种方式完全不需要依赖编号，后续新增屏幕或按钮时，只需给按钮设置对应targetScreen属性即可，扩展性更强。

方案3：基于当前屏幕的条件判断 #

如果坚持用最初的条件判断思路，每次点击时重新获取当前屏幕对应的编号，避免全局变量不同步问题：

// 给所有导航按钮绑定同一个处理函数
onEvent("nextButton1", "click", navigate);
onEvent("nextButton2", "click", navigate);

function navigate() {
  var i;
  var currentScreen = getScreen();
  // 根据当前屏幕设置i的值
  if(currentScreen === "homeScreen"){
    i = 1;
  } else if(currentScreen === "user1"){
    i = 2;
  } else if(currentScreen === "user2"){
    i = 3;
  }
  setScreen("person" + i);
}

内容的提问来源于stack exchange，提问作者JacksonP