[Javascript] Battle System Help

Basically what I really need help on is the battle system. I made it so its a picture of a full health bar and everytime a button is clicked I need the health to go down. Instead of using images I was wondering is there a way to some how make a empty box apear filled with green or something and everytime a button is clicked a certain amount goes down. Because I want there to be 4 buttons with a unique attack if I do it my way with the images then it will get messed up like this:

The health bars are full and you press a attack, their health goes down to 75% and then you click a different attack and it goes to 80% because that attack might of bean weaker. So thats where my problem comes in. Also I need to be able to fit two of those on the screen and I was thinking of using Front Page to do it but the codes dont show up. So any help?

i never saw a game coded in javascript,
i hope you know that your code is public...
well you can make 100 images for each percent.
but you probably can use the same image and just make it appear more.
like
AAAAAA
hope you understand
:D

Uhh not exactly.....Can you explain it more clearly? I get the health bar bit but not the rest

PHP Code:

---

//Battle System
var life1="imageurl.jpg"
var life2="imageurl2.jpg"
//etc
var a=Math.ceil(Math.random()*2)//if three images:Math.random()*3)
if (a==1) a=life1
else if (a==2) a=life2
//if more add : else if (a==3) a=line3
if(//something happens)
else if(//something else happens(/=/)){}
else{
document.write(''a'')} 


---