How do i can program a health bar in JavaScript and HTML

Question

For example a health bar

Answer 1

health:<progress min=0 max=100 value=35 name=hel id=progres></progress>
you can change its value in js
and color design look. animation shadow in css

Answer 2

it is by
document.getElementById("progress").value=23;

Answer 3

did you used proper id I mean set the progress bar id to progress
ok try this
<progress id=progress min=0 max=100 name=health value=0></progress>
<button onclick="document.getElementById( 'progress').value+=6;">Click</button>

Answer 4

yes then add that code to go drop instead of button
character looses health...
var progressbar=document.getElementById("progress");
function healthdrop(){
health=health-6;
progressbar.value=health;
healthscore.innerHTML=health;
}

Answer 5

yes you can put any variable as value

Answer 6

I got the error
you used progressbar=document. getElementById("progress").value
now in line 3 you set its value
so it becomes progressbarselement.value.value
use value once

Answer 7

no I had no problem with German bien
but code is not being shown
did you corrected that you should use
document.getElementById("progress");
only not ("progress").value;

Answer 8

because you used .value twice
first health=document...("progress").value
then you set Heath.value
so it becomes element.value.value
use only once

Answer 9

hey Diego what I suggest is you make a separate page please
for testing this
<progress id=progress min=0 max=100 name=health value=0></progress>
<button onclick="function(){
document.getElementById('progress').value+=6;
}">Click</button>

or <button onclick=incprogress()>Click</button>
<script>function incprogress(){
document.getElementById("progress").value+=6;}</scrip t>

Answer 10

the spelling of heathbar at innerHTML is also wrong correct it.
one suggestion that instead of alert prompt there
you can use <input type=text id=input>
and then access's it using js document.getElementById("input").value;

Answer 11

ok I will answer tomorrow it is too night here
I will see it in morning zzz...

Answer 12

i live in India 🇮 ndia

Answer 13

in health bar alpha
you declared variable called health bar and set value of not heathbar but progress which is showing error change it

Answer 14

I too was getting same error in my program
it is because var element=document.getElementById(element)
doesn't work in sololearn so you have to replace it with document.getElementById( directly I don't why but you can see my code

Answer 15

there is only one code as public see it's js section I made the var comment there is other problem too wait I will see all your code I can't now becuase it's time to sleep in India 😀

Answer 16

hey Diego problem is solved move the line var=hpyou before the function
and make the attack 4e function

Answer 17

Thanks

Answer 18

How I can change the value with JavaScript?😅

Answer 19

Thanks twice

Answer 20

I've written this and it don't work:

var hpyou = 100
var you = document.getElementById("progress").value = hpyou

<progress min="0" max="100"></progress>