You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将输入框值设为全局变量?新手遇阻求助

解决输入框值转为全局变量的问题

咱们先拆解下你代码里的核心问题:

  • 你手动调用getNum1()的时候没传任何参数,这时候函数里的eundefined,全局变量自然被设成了无效值;
  • 第一种方法里的changeable没提前声明,属于隐式全局变量,虽然能跑但不规范,很容易引发意外bug。

下面是修正后的完整实现,直接就能用:

<!-- 输入框部分保持你原来的写法就行 -->
<input id="inte1" onchange="getNum1(this.value)"> 
<input id="inte2" onchange="getNum2(this.value)">

<script>
// 提前声明全局变量,明确作用域,避免隐式全局的坑
let num1, num2;

// 给第一个输入框绑定的赋值函数
function getNum1(e) {
  num1 = e;
  // 可以加个测试打印,输入变化后在控制台看结果
  console.log("当前num1全局变量:", num1);
}

// 给第二个输入框绑定的赋值函数
function getNum2(e) {
  num2 = e;
  console.log("当前num2全局变量:", num2);
}

// 如果要测试初始化,手动调用时记得传值,比如:
// getNum1("测试值1");
// getNum2("测试值2");
// console.log(num1, num2);
</script>

关键细节说明:

  1. 全局变量声明:用let(或var/const,按需选择)提前声明全局变量,代码更清晰,也符合JS的编码规范;
  2. 触发时机onchange事件会在输入框内容改变并失去焦点时自动调用函数,同时把当前输入值传给e,不需要你手动无参调用getNum1()
  3. 关于window全局的写法:如果你想用window.xxx的方式定义全局变量也完全可行,只需要确保函数是在输入框触发onchange时调用(而不是无参手动调用):
function getNum1(e) {
  window.num1 = e;
}

输入框变化后,window.num1就会有正确的输入值了。

你可以在输入框里输入内容,点击页面其他地方触发onchange,再打开浏览器控制台就能看到全局变量的正确值啦~

内容的提问来源于stack exchange,提问作者Ling

火山引擎 最新活动