NaN returned when running a function to change a variable
Question
I am trying to make a clicker game in HTML and JavaScript, and when I click the button to give me money, nothing happens. I tried printing it to the console, and it returned as NaN once, and once I clicked the button again, nothing happened. Here is the code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
</head>
<body>
<a class="clicker" id="clicker" href="#"> Click for Money </a>
<div class="main-content">
<h2 id="para">Money: 0</h2>
<script type="text/javascript">
document.getElementById("clicker").onclick= update(2);
//document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
var money = parseFloat(0);
function update (amount)
{
console.log(parseFloat(amount))
money += parseFloat(amount);
document.getElementById("para").innerHTML="Money: " + parseFloat(amount);
return false;
}
</script>
</div>
</body>
</html>
8 answers
solution1
2 ACCPTED 2018-03-16 21:12:22
I don't see any NaN(when I run your code) but found one mistake and that is document.getElementById("clicker").onclick= update(2); here you are not assigning function to onclick but you calling function and return value of function(which is undefined for above case as we are not returning anything) is assigned to onclick(which is undefined). o assign function do following document.getElementById("clicker").onclick= function(){update(2);}
<html> <head> <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png"> </head> <body> <a class="clicker" id="clicker" href="#"> Click for Money </a> <div class="main-content"> <h2 id="para">Money: 0</h2> <script type="text/javascript"> document.getElementById("clicker").onclick= function(){ update(2) }; //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60); var money = parseFloat(0); function update (amount) { console.log(parseFloat(amount)) money += parseFloat(amount); console.log(money); document.getElementById("para").innerHTML="Money: " + parseFloat(amount); return false; } </script> </div> </body> </html>
solution2
1 2018-03-16 21:08:19
This line should be as follows:
document.getElementById("clicker").onclick= update
...not...
document.getElementById("clicker").onclick= update(2)
As you've written it, update is only called once, with a value of 2. You're getting NaN because update is called before you've zeroed money .
By the way, this is sufficient:
var money = 0;
There's nothing to be gained by adding parseFloat in there.
solution3
0 2018-03-16 21:08:08
You're assigning the call to the update function as the onclick event handler.
If you want to send an argument, you should bind it in the event handler like so:
document.getElementById("clicker").onclick = update.bind(this, 2);
solution4
0 2018-03-16 21:13:18
Rather than grabbing the element from the DOM and assigning the event, it might be advisable to explicitly wire the function on the onclick event in the HTML itself. Anyway, what you were doing was assigning a function call to an event. Anytime you have parentheses "()" after a function name, it gets invoked. Rather you have to assign the body of a function, which gets executed. For instance, your code ought to be ->
document.getElementById("clicker").onclick= function () {update(2)};
Here is a code that might be working as you would have expected
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png"> </head> <body> <a class="clicker" id="clicker" onclick="update(2)" href="#"> Click for Money </a> <div class="main-content"> <h2 id="para">Money: 0</h2> <script type="text/javascript"> var money = parseFloat(0); function update (amount) { console.log(parseFloat(amount)) money += parseFloat(amount); document.getElementById("para").innerHTML="Money: " + parseFloat(amount); return false; } </script> </div> </body> </html>
solution5
0 2018-03-16 21:17:55
A few things wrong here.
As others pointed out you need to use an anonymous function on the onclick and pass the parameter to update in there
You should wrap only the number in a span to make the code parse the number easier in the update function.
You were never incrementing the previous value, only incrementing from 0 each time update is called. you need to get the previous value, parse it, and then add to it.
document.getElementById("clicker").onclick = function() { update(2) }; //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60); var para = document.getElementById("para"); var money = document.getElementById("money"); function update(newAmount) { var oldMoney = parseFloat(money.textContent); var newMoney = oldMoney + parseFloat(newAmount); money.innerHTML = parseFloat(newMoney); }
<a class="clicker" id="clicker" href="#"> Click for Money </a> <div class="main-content"> <h2 id="para">Money: <span id="money">0</span></h2> </div>
solution6
0 2018-03-16 21:19:56
Since you are incrementing the money variable it would seem that you also want that value to display rather than the amount being passed in:
document.getElementById("para").innerHTML="Money: " + parseFloat(money);
Not...
document.getElementById("para").innerHTML="Money: " + parseFloat(amount);
solution7
0 2018-03-16 21:28:38
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png">
</head>
<body>
<a class="clicker" id="clicker" onclick="update(2)" href="#"> Click for Money </a>
<div class="main-content">
<h2 id="para">Money: 0</h2>
<script type="text/javascript">
//document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60);
var money = parseFloat(0);
function update (amount)
{
console.log(parseFloat(amount))
money += parseFloat(amount);
console.log(money);
document.getElementById("para").innerHTML="Money: " + money;
return false;
}
</script>
</div>
</body>
solution8
0 2018-03-16 21:29:46
document.getElementById("clicker").onclick= function(){ update(2) }; //document.cookie = "money="+money, time() + (10 * 365 * 24 * 60 * 60); var money = parseFloat(0); function update (amount){ money += amount; document.getElementById("para").innerHTML="Money: " + money; return false; }
<html> <head> <link rel="stylesheet" href="style.css"> <link rel="icon" type="image/png" href="http://marcopolo0306.github.io/content/images/icon.png"> </head> <body> <a class="clicker" id="clicker" href="#"> Click for Money </a> <div class="main-content"> <h2 id="para">Money: 0</h2> </div> </body> </html>
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.