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)