我正在创建一个从文本框()获取输入的网页。该页面还有三个执行不同功能的按钮。这些函数共享许多变量,因此我将大多数变量设为全局变量。我的问题是,当我在文本框中输入文本并单击按钮时,函数会运行,但全局变量不会初始化,因此函数无法正常运行。我需要在函数运行之前初始化变量。 我已经将代码剪切到尽可能简单,仍然可以显示问题。我的原始代码有三个按钮和三个函数,这就是我需要使用全局变量的原因。
<html>
<head>
<body>
<form>
<br><input type="text" class="boxleft" placeholder="type here..." id="Age"/>
<br> <input type="text" id="retireAge" class="boxleft" placeholder="type here..." />
</form>
<button id="test" onclick="CalcNW()" >Test</button>
<script type="text/javascript">
//global variables
var age = document.getElementById("Age").value;
var rage = document.getElementById("retireAge").value;
function CalcNW() {
var workingyears = rage - age;
alert(workingyears);
}
</script>
</body>
</html>
在此示例中,函数无法正常工作,因为愤怒和年龄将为空。 无论如何都要在运行任何函数之前初始化全局变量吗?
答案 0 :(得分:1)
将你的js代码包装在window.onload
中window.onload = function(){
var age = document.getElementById("Age").value;
var rage = document.getElementById("retireAge").value;
function CalcNW() {
var workingyears = rage - age;
alert(workingyears);
}
}
答案 1 :(得分:0)
嗯,这是糟糕的设计。即使您希望保持变量全局,也应该在单击函数时评估表单中的值。发生了什么是javascript在dom加载完成之前可能会立即填充值。此外,当您根据应用程序状态定义全局变量时,最好添加window.onload处理程序。玩得开心。 :)
也许,你可以这样做:
age = 0;
rage 0;
function CalcNW() {
getInput();
var workingyears = rage - age;
alert(workingyears);
}
function getInput(){
age = document.getElementById("Age").value;
rage = document.getElementById("retireAge").value;
}
答案 2 :(得分:0)
//global variables
var age, rage;
function CalcNW() {
age = document.getElementById("Age").value;
rage = document.getElementById("retireAge").value;
var workingyears = rage - age;
alert(workingyears);
}
为什么不在函数之外声明变量,并在其中设置它们?