JavaScript define variable outside function
Question
I am trying to make a variable which I can keep adding a number to with an html <input type="number"> .
I want the variable to change with the click of a button with the value of the input. By clicking the button again I want the variable to add the second input to the previously changed number.
With the following code I get the NaN message with whatever input value because var num is undifined:
<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>
But if I do define var num = 0; in the function the number resets each time I call the function. How can I define the variable num in the function without resetting it's value upon calling it?
4 answers
solution1
3 2014-12-02 10:54:46
You are resetting num in your add() function, and it doesn't make much sense:
var num = num+addnum;
means "make a new variable num, whose value is num+addnum, but wait, you just defined num, so..."
You want to reference the global var. Try this:
num += addnum;
or
num = num+addnum;
solution2
1 2014-12-02 10:56:16
You can do something like this
<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>
solution3
1 2014-12-02 10:56:30
There is tricky hoisting thing happening which confuses you. Your code is equivalent to this:
function add() {
var addnum = parseInt(document.getElementById("addnum").value);
var num;
num = num + addnum;
document.getElementById('number').innerHTML = num;
}
Now it's obvious why num is undefined within function block, num is declared but not defined so it's undefined , and local declaration shadows outer num . So you get NaN of course.
The fix is simple, just remove var keyword to work directly with outer scope num .
solution4
0 2014-12-02 10:56:56
Try this:
<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>
You're having this problem because everytime you click, your function starts all over again then finishes, and releasing its allocated memory spaces.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.