JavaScript中如何通过点击事件实现函数间参数传递并在指定按钮点击时输出参数值

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是passvalue和getvalue这两个函数没有共享的存储来保存那个数值2，所以点击btn2的时候getvalue根本不知道之前传过来的值是什么。下面给你两种可行的解决办法：

方法一：使用全局变量（简单直接） #

这是最容易上手的方案，我们定义一个全局变量来存储传递过来的值，让两个函数都能访问到它：

<button class='btn1' onclick='passvalue(2)'>传递数值</button>
<button class='btn2' onclick='getvalue()'>打印数值</button>

<script>
// 定义全局变量存储传递的值
let storedValue;

function passvalue(num) {
  // 把传入的参数赋值给全局变量
  storedValue = num;
  console.log("数值已存储：", storedValue);
}

function getvalue() {
  // 检查是否有存储的值，然后打印
  if (storedValue !== undefined) {
    console.log(storedValue);
  } else {
    console.log("还没有传递任何数值哦！");
  }
}
</script>

方法二：使用闭包封装（更规范，避免全局污染） #

如果不想用全局变量（避免全局作用域污染），可以用闭包把变量封装起来，更符合模块化的写法：

<button class='btn1' onclick='valueHandler.passvalue(2)'>传递数值</button>
<button class='btn2' onclick='valueHandler.getvalue()'>打印数值</button>

<script>
const valueHandler = (function() {
  // 闭包内部的变量，外部无法直接访问
  let storedValue;

  return {
    passvalue: function(num) {
      storedValue = num;
      console.log("数值已存储：", storedValue);
    },
    getvalue: function() {
      if (storedValue !== undefined) {
        console.log(storedValue);
      } else {
        console.log("还没有传递任何数值哦！");
      }
    }
  };
})();
</script>

这两种方法都能实现你的需求：点击btn1后，数值2会被保存下来，之后每次点击btn2，控制台都会打印出2。如果还没点击btn1就点击btn2，还会给出提示，体验更好~

内容的提问来源于stack exchange，提问作者Zannatul Ferdousi Hema