JavaScript点击按钮后函数无返回值，如何更新并使用全局变量？

原代码的核心问题 #

你第一段代码里的console.log(global)是页面一加载就执行的，这时候按钮还没被点击，global变量根本没被赋值，所以打印出来肯定是空的。和return语句无关，是你读取变量的时机不对。

修正方案 #

要实现每次点击按钮更新变量并能在外部使用，有两种简单可行的方式：

• 方式一：更新变量后立即触发使用逻辑
  把需要用到该变量的代码封装成函数，在点击事件里更新变量后调用这个函数，确保读取时机正确：

var global;
document.getElementById("Updatebtn").addEventListener("click", myFunction);

function myFunction() {
  var x = document.getElementById("start");
  global = x.value;
  // 更新变量后调用使用逻辑
  useUpdatedValue();
}

function useUpdatedValue() {
  console.log(global); // 这里能拿到每次点击后的最新值
}

• 方式二：放弃全局变量，直接按需读取
  如果不是必须依赖全局变量，完全可以在需要取值的时候直接从输入框获取，避免全局变量带来的维护问题：

document.getElementById("Updatebtn").addEventListener("click", function() {
  // 点击时直接获取最新值并使用
  const currentVal = document.getElementById("start").value;
  console.log(currentVal);
});

关于你尝试的Async代码问题 #

你写的async代码有两个明显问题：

1. 页面加载时就直接调用了delay().then(...)，这只会执行一次，和按钮点击事件完全无关；
2. 完全不需要加3秒的setTimeout，点击按钮时可以直接同步获取输入框的值，没有异步操作的场景。

如果一定要用async/await的写法（其实没必要，这里没有真正的异步任务），修正后的代码如下：

document.getElementById("Updatebtn").addEventListener("click", async function() {
  const value = await getInputValue();
  console.log(value); // 点击后打印最新值
});

function getInputValue() {
  // 同步取值直接返回即可，不需要Promise
  const x = document.getElementById("start");
  return x.value;
}

核心逻辑总结：必须确保读取变量的时机在变量被更新之后，这是解决问题的关键。

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