Javascript Health & Damage

Question

Hello sololearners! I'm still struggling with JScript here, im trying to make a simple battle as an exercise to practice:

document.getElementById("Damage").addEventListener("click", attack);

let goblinHP = 50;

function attack(){
let dPoint = Math.floor((Math.random()*10) + 1);
let goblinHP = goblinHP - dPoint;
return goblinHP;
document.getElementById('textbox').innerHTML = `Goblin received ${dPoint} points of damage!`;
document.getElementById('health').innerHTML = `${goblinHP} HP`;
}

So basically i have an enemy called "goblin", and a button with id "damage" on it, which generates a random between 1 - 10 to deal damage to the "goblin", then there <p> element with id "Health" ( <p id="health">50 HP</p> ) , which i want to change each time i press "attack".
I thought my code would work but it doesn't. Am i messing up the scope? Thanks !

Answer 1

A) Complete solution:

https://code.sololearn.com/WXRjflR2DcxP/?ref=app

B) Point by point explanation :

1. Sololearn executes JS tab scripts in head, before the elements exist.
Therefore addEventListener and getElementById may return null error.
One of the solutions is to wrap scripts in window.onload = function (){
...
}

2. Your have let globinHP already, so don't let it again. Use the variable in global scope directly.

We'll talk about closure tomorrow, and let VS var on Friday, follow everything.js

3. Don't need to return in your case.

4. You need to add content, so use +=

5. Line break for innerHTMl is <br>(poor way) , line break for innerText is \n. Here I am using \n which have more control on spacing.

6. Take the innerText assignment out as a separate function, for readability.

Answer 2

You are welcome.

After reading your description, it is possible that you have use the script tags in your head or beginning of body.

This code snippet by Calvin should explain the sequence of JavaScript execution.

https://code.sololearn.com/W8qiO41gHNfu/?ref=app

If you are importing library, use script at head.

If you are coding in the file, use script just before end of body.

Lastly here is a link to everything.js

https://www.sololearn.com/Profile/13601090/?ref=app

We should post about this sequence issue and explain closure and let/var within coming days.

Answer 3

ooh, the function attack end before the textbox updated.

move your return statement at the end of the function

Answer 4

texbox ? the <input type ="text"> ?
if it is then dont use .innerHTML but .value

Answer 5

Sorry, it's a <p> element with the id "health":
<p id="health">50 HP</p>

Answer 6

That function onload wrap works wonders, gordon! Thanks!
I could learn a lot by your demonstration code and also could fix mine with that onload (odd thing, i wasnt using solo learn, but my own browser and text editor program, and didnt work before i added the onload wrap)

Answer 7

Thank you for shedding light on mental health awareness. Your post was thoughtful and informative, and I appreciated the encouragement to seek help when needed. Do you have recommendations for daily practices to improve mental well-being? Thanks for promoting such an important topic!
https://hartorthodontics.ca
orthodontist

Answer 8

Maintaining good dental health is essential for overall well-being, yet it’s often underestimated. Regular dental check-ups, proper brushing, and flossing can prevent many common issues like cavities and gum disease. It’s always worth investing time and care in your oral hygiene to ensure a healthy and confident smile! <a href="https://denticore-dental.com" target="_blank">Denticore Dental</a>

Answer 9

Taking dental records to a new clinic is such an important point that’s often overlooked. It really helps the new dentist understand your history and plan treatments accordingly. For those who’ve moved recently, did you find it easy to transfer records, or was it a hassle? https://nerverecoverymax.ca/

Answer 10

Thank you so much Gordon. lymphsavior-us.com/