如何将输入框值设为全局变量?新手遇阻求助
解决输入框值转为全局变量的问题
咱们先拆解下你代码里的核心问题:
- 你手动调用
getNum1()的时候没传任何参数,这时候函数里的e是undefined,全局变量自然被设成了无效值; - 第一种方法里的
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>
关键细节说明:
- 全局变量声明:用
let(或var/const,按需选择)提前声明全局变量,代码更清晰,也符合JS的编码规范; - 触发时机:
onchange事件会在输入框内容改变并失去焦点时自动调用函数,同时把当前输入值传给e,不需要你手动无参调用getNum1(); - 关于window全局的写法:如果你想用
window.xxx的方式定义全局变量也完全可行,只需要确保函数是在输入框触发onchange时调用(而不是无参手动调用):
function getNum1(e) { window.num1 = e; }
输入框变化后,window.num1就会有正确的输入值了。
你可以在输入框里输入内容,点击页面其他地方触发onchange,再打开浏览器控制台就能看到全局变量的正确值啦~
内容的提问来源于stack exchange,提问作者Ling




