I'm working on a simple game and I've gotten as far as coding it so that when you click on an attack button it should generate a random number based on a base and strength then subtract that from the enemy's health but the subtracting part doesn't seem to work. It always outputs NaN.
<head>
<script>
var playerHealth=100;
var enemyHealth=100;
var strength=10;
function begin(){
document.getElementById('playerhealth').innerHTML = playerHealth;
document.getElementById('enemyhealth').innerHTML = enemyHealth;
}
function hitEnemy(){
var attack=Math.floor(Math.random()*20 + strength);
var enemyHealth = enemyHealth - attack;
document.getElementById('damage').innerHTML = attack;
document.getElementById('enemyhealth').innerHTML = enemyHealth;
}
</script>
</head>
<body onload="begin()">
<input type="button" name="doit" id="doit" value="Attack!" onclick="hitEnemy();">
<br /><span>playerhealth</span>
<div style="font-size:3em;" id="playerhealth"></div>
<span>enemyhealth</span>
<div style="font-size:3em;" id="enemyhealth"></div>
<br />
<span>You Did:</span><span style="font-size:3em;" id="damage"></span><span>damage</span>
</body>
It may have something to do with not specifically making sure that they're integers but I'm not sure how to do that.
I'm working on a simple game and I've gotten as far as coding it so that when you click on an attack button it should generate a random number based on a base and strength then subtract that from the enemy's health but the subtracting part doesn't seem to work. It always outputs NaN.
<head>
<script>
var playerHealth=100;
var enemyHealth=100;
var strength=10;
function begin(){
document.getElementById('playerhealth').innerHTML = playerHealth;
document.getElementById('enemyhealth').innerHTML = enemyHealth;
}
function hitEnemy(){
var attack=Math.floor(Math.random()*20 + strength);
var enemyHealth = enemyHealth - attack;
document.getElementById('damage').innerHTML = attack;
document.getElementById('enemyhealth').innerHTML = enemyHealth;
}
</script>
</head>
<body onload="begin()">
<input type="button" name="doit" id="doit" value="Attack!" onclick="hitEnemy();">
<br /><span>playerhealth</span>
<div style="font-size:3em;" id="playerhealth"></div>
<span>enemyhealth</span>
<div style="font-size:3em;" id="enemyhealth"></div>
<br />
<span>You Did:</span><span style="font-size:3em;" id="damage"></span><span>damage</span>
</body>
It may have something to do with not specifically making sure that they're integers but I'm not sure how to do that.
Share Improve this question edited Nov 3, 2011 at 0:55 Igor 34k14 gold badges82 silver badges116 bronze badges asked Nov 3, 2011 at 0:34 user1026779user1026779 131 gold badge1 silver badge3 bronze badges3 Answers
Reset to default 3because you redefine the enemyHealth var inside hitEnemy function. Remove the var to fix it.
function hitEnemy(){
var attack=Math.floor(Math.random()*20 + strength);
enemyHealth = enemyHealth - attack;
document.getElementById('damage').innerHTML = attack;
document.getElementById('enemyhealth').innerHTML = enemyHealth;
}
Here is the most immediate problem. You need to remove var from the enemyHealth decalaration inside of hitEnemy. This creates a new variable named enemyHealth intsead of modifying the first one.
enemyHealth = enemyHealth - parseFloat(attack);
Additionally you should be calling begin at the end of every hitEnemy call in order to update the scores. Here's a working version of the code
- http://jsfiddle/YbCay/
To add to Jared's response...
var enemyHealth = enemyHealth - attack;
is shorthand for...
var enemyHealth;
enemyHealth = enemyHealth - attack;
First, enemyHealth is defined as undefined* within the scope of hitEnemy. Now, two variables named enemyHealth exist, but the inner one "shadows" the outer one, making it impossible to refer to the outer one. So, attack is subtracted from undefined, producing NaN.
* which sounds nonsensical, I know