JavaScript中如何点击后将函数返回值赋值给变量供后续使用？

嘿，这事儿其实超简单，你只需要在点击事件的回调函数里，把foo()的返回值直接赋值给目标变量就行！下面给你两种常用的实现方式：

1. 用全局变量（适合后续在其他地方访问这个值） #

先在全局作用域声明一个变量，然后在点击回调里给它赋值：

let x = 3;
let hold; // 提前声明全局变量，方便后续使用

function foo(){
  let z = 5;
  z = x + 3;
  return z;
}

// 绑定点击事件并保存返回值
document.getElementById("empty_field").onclick = function() {
  hold = foo(); // 把foo的返回值存到hold里
  console.log(hold); // 点击后控制台会输出8，验证一下
};

2. 用局部变量（仅在回调内部或相关作用域使用） #

如果这个值只需要在点击后的逻辑里用，直接在回调内部声明变量就行：

let x = 3;

function foo(){
  let z = 5;
  z = x + 3;
  return z;
}

document.getElementById("empty_field").onclick = function() {
  const hold = foo(); // 局部变量，仅限这个回调函数内使用
  // 这里可以直接用hold做后续操作，比如弹出提示或者更新页面
  alert(`函数返回值是：${hold}`);
};

为啥之前的写法没效果？ #

你之前的代码只是调用了foo()，但没有把它的返回值赋值给任何变量——就像你计算了一个结果，但没把它写到本子上，自然没法后续用啦。只要在回调里加上赋值操作，就能把结果存下来咯！

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