Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Peter Hilgersom
277 Points"Beat the Yeti" or How my Heart is Sinking
Hi guys,
Being relatively new but not completely unknown to javascript I wanted to go ahead and play around a bit on my own idea. So I thought 'Let's warm up and create a simple game where you have an Ogre with 20hp, and when you click on a button you deal 5 damage and the hp of the Ogre updates'.
Very easy right? I thought so, but for the hell of me I can't figure out what I have to do now. When you look at my script below then I understand that I have to actually call the function Attack(). Which I do with the button. And then the 'yetihp' variable should be updated right? But why doesn't it change? I thought JS was a client side script.
I feel completely noobish for being at a loss :( Can somebody help me out what I'm missing out on? I can't figure it out for the life of me.
<html>
<head>
<title>Beat the Chillwind Yeti</title>
<script>
var yetihp = 20;
var damageroll;
function Attack(){
damageroll = 5;
yetihp = yetihp - damageroll;
return yetihp;
}
</script>
</head>
<body>
<p>Yeti health remaining: <script> document.write(yetihp);</script></p>
<script>
if(damageroll > 0){
document.write("<p>You did " + damageroll + " damage</p>");
}
else {
document.write("<p>Start swinging!</p>");
}
document.write(yetihp);
</script>
<button onclick="Attack()">Attack the Yeti</button>
</body>
</html>
6 Answers
Ian Robinson
337 PointsHi Peter,
My mistake, this line is the culprit:
document.getElementById("yetihpValue").innerHTML = yetihp;
The browser is probably trying to execute it before the Document Object Model (DOM) is fully loaded. If this is happening then it is trying to put the value of yetihp inside the DOM element yetihpValue but the element doesn't exist yet.
You can wrap this line in a special function that runs only when the DOM has fully loaded:
window.onload = function() {
document.getElementById("yetihpValue").innerHTML = yetihp;
};
Eventually, when you're comfortable with JavaScript, you might want to take a look at jQuery. It doesn't replace JavaScript but builds upon it, providing lots of handy utilities and most importantly - a much easier way of creating and populating DOM elements using JavaScript. There are also other handy libraries such as AngularJS, KnockoutJS, BackBoneJS. People tend to concentrate on one of these or the other, you don't necessarily need to learn them all unless you really want to. Underpinning it all though is JavaScript.
Here's a complete example:
<html>
<head>
<title>Beat the Chillwind Yeti</title>
<script>
var yetihp = 20;
var damageroll;
window.onload = function() {
document.getElementById("yetihpValue").innerHTML = yetihp;
};
function Attack(){
if (yetihp > 0)
{
var status = document.getElementById("status");
damageroll = 5;
yetihp = yetihp - damageroll;
document.getElementById("yetihpValue").innerHTML = yetihp;
if (yetihp > 0)
{
status.innerHTML = "You did " + damageroll + " damage.";
}
else
{
status.innerHTML = "";
}
}
}
</script>
</head>
<body>
<p>Yeti health remaining: <span id="yetihpValue"></span></p>
<p id="status">Start swinging!</p>
<button onclick="Attack()">Attack the Yeti</button>
</body>
</html>
Ian Robinson
337 PointsHi Peter,
The code between the script tags will run only once, when the page loads. So even though your Attack() function is changing the value of yetihp, the change won't appear in the page because your "document.write(yetihp)" statement only runs when the page first loaded.
You can change elements of the page with javascript by giving them identifiers (id="") and then getting those elements with your javascript code, i.e. document.getElementById("yetihpValue").
Please see a working example below.
<html>
<head>
<title>Beat the Chillwind Yeti</title>
<script>
var yetihp = 20;
var damageroll;
document.getElementById("yetihpValue").innerHTML = yetihp;
function Attack(){
if (yetihp > 0)
{
var status = document.getElementById("status");
damageroll = 5;
yetihp = yetihp - damageroll;
document.getElementById("yetihpValue").innerHTML = yetihp;
if (yetihp > 0)
{
status.innerHTML = "You did " + damageroll + " damage.";
}
else
{
status.innerHTML = "";
}
}
}
</script>
</head>
<body>
<p>Yeti health remaining: <span id="yetihpValue"></span></p>
<p id="status">Start swinging!</p>
<button onclick="Attack()">Attack the Yeti</button>
</body>
</html>
Peter Hilgersom
277 PointsHi Ian,
Thank you so much for your answer. It seems so obvious now :) I completely forgot that it only runs once. Thanks!
Peter
Peter Hilgersom
277 PointsOne more small thing: when you load the page it sets the yetihp to 20 and then you fill the yetiValue span with that variable value. But it doesn't show up on load. Why would that be?
-edit- Ah it's because the span is rendered after putting the value in. Makes sense. In jQuery you could use on document ready. But how would this work in JS?
Peter Hilgersom
277 PointsThat did the trick! Thank you so much for your help Ian :) Cool stuff. Now I'm going to extend it a bit with different weapons and the yeti swinging back!
Ian Robinson
337 PointsNo worries Peter, have fun!