JavaScript定义变量外功能
问题描述:
我想做一个变量,我可以不断添加一个数字与HTML <input type="number">
。
我希望变量通过点击一个按钮来改变输入的值。通过再次点击按钮,我希望变量将第二个输入添加到先前更改的数字。
用下面的代码我得到任何输入值NaN的消息,因为var num
是undifined:JavaScript定义变量外功能
<body>
<span id="number"></span>
<input id="addnum" type="number" style="width:60px; height:20px;">
<button onclick='add()'>Add</button>
<script>
var num = 0;
window.onload = function numstart() {
document.getElementById('number').innerHTML = num;
}
function add() {
var addnum = parseInt(document.getElementById("addnum").value);
var num = num + addnum;
document.getElementById('number').innerHTML = num;
}
</script>
</body>
但是,如果我做定义功能var num = 0;
数量每个I调用函数时重置。如何在函数中定义变量num而不调用它的值时调用它?
答
你可以做这样的事情
<body>
<span id="number"></span>
<input id="addnum" type="number" style="width:60px; height:20px;">
<button onclick='add()'>Add</button>
<script>
var num = 0;
window.onload = function numstart() {
document.getElementById('number').innerHTML = num;
}
function add() {
var addnum = parseInt(document.getElementById("addnum").value);
num = num + addNum;
document.getElementById('number').innerHTML = num;
}
</script>
答
有棘手的事情hoisting发生其迷惑你。您的代码是相同的:
function add() {
var addnum = parseInt(document.getElementById("addnum").value);
var num;
num = num + addnum;
document.getElementById('number').innerHTML = num;
}
为什么num
的功能块中未定义,num
的已宣告但尚未定义所以它的undefined
和属地申报阴影外num
现在很明显。所以你当然会得到NaN
。
该修复很简单,只需删除var
关键字直接与外部范围num
工作。
答
试试这个:
<html>
<head>
<script>
function add() {
document.getElementById('number').innerHTML = parseInt(document.getElementById('number').innerHTML)+1;
}
</script>
</head>
<body>
<span id="number"></span>
<input id="addnum" type="number" style="width:60px; height:20px;">
<button onclick='add()'>Add</button>
</body>
</html>
因为每次你点击你有这个问题,你的函数开始从头再来然后完成,并释放其分配的内存空间。
删除函数中的“var”; “var”这个词基本上意味着“创造一个新变量”,这显然不是你想要的。 – Erik 2014-12-02 10:53:35