如何通过用户输入创建JavaScript全局变量？解决变量未显示问题

嘿，我一眼就看出问题出在哪啦！你现在的核心问题是获取用户输入的时机不对：你把var catName = getText("nameInput");写在了全局作用域里，这行代码会在程序刚启动时就执行，但这时候用户还没来得及在输入框里填写猫咪名字呢，所以catName拿到的是空值或者输入框的初始默认值，点击按钮自然就显示不出名字啦。

修正后的代码 #

// 把获取输入的逻辑移到点击事件内部
onEvent("startBtn", "click", function(event) {
  // 点击按钮时才去获取用户刚输入的名字
  var catName = getText("nameInput");
  setScreen("feedingScreen");
  setText("feedingText", catName+" is hungry! Give "+catName+" some food! Click fish to feed.");
});

为什么这样改？ #

• 把getText放在点击事件的回调函数里，确保每次用户点击按钮时，我们都能拿到最新的输入内容，而不是程序启动时的空值。
• 这样用户输入名字后点击按钮，catName就会正确获取到输入的内容，然后替换到文本里。

额外优化小建议 #

为了避免用户没输入名字就点击按钮的情况，可以加个简单的判断，提升用户体验：

onEvent("startBtn", "click", function(event) {
  var catName = getText("nameInput");
  // 判断输入是否为空（去掉首尾空格后检查）
  if (!catName.trim()) {
    setText("someErrorMessage", "请先输入猫咪的名字哦！");
    return; // 不执行后续跳转逻辑
  }
  setScreen("feedingScreen");
  setText("feedingText", catName+" is hungry! Give "+catName+" some food! Click fish to feed.");
});

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