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

Great post! Your explanation of the benefits of daily exercise is very encouraging. It’s amazing how much just 30 minutes of physical activity can impact overall health and mood. Thanks for reminding us how easy it can be to incorporate movement into our routines!
https://www.hotfrog.in/company/1201042372276224/dr-ramya-sadaram/visakhapatnam/hospitals-clinics
Gynecologist in vizag

Answer 8

Fiber is crucial for digestion and helps prevent constipation. Foods rich in fiber, like whole grains, fruits, and vegetables, also promote heart health and maintain stable blood sugar levels. Aim to include more fiber-rich foods in your daily meals to support a healthy digestive system.
https://www.lapruebadeadn.com/
Pruebas de ADN

Answer 9

Staying hydrated is so crucial for overall health. I’ve noticed a huge difference in my energy levels since focusing on drinking more water. It also helps with my skin and digestion. Thanks for the tips!
https://troponinsupplements.com
Intra-workout nutrition