PDA

View Full Version : Updating div style.width based on variable



lmbarns
12-12-2011, 11:25 PM
edit::Jeez I think I got it to work, of course i post it and 5 min later I solve it after trying to solve it for more than 6 hours I didn't have
div.style.width = baseval + "px";

ugh, it still has to use setInterval(setStyle, 500) to update it every half second, am I just not calling setStyle correctly to trigger it manually when the points change?? if you look at the code below, to call setStyle(baseval) {} from another function what's the format: setStyle(); or setStyle(baseval); or setStyle(points); ?? or something else?



//Global Variables
var points; //this is adjusted by other functions when you win/lose points
var baseval = points; //i want baseval to grow as points increase

function setStyle(baseval) {
var div = document.getElementById("hp");
div.style.width = baseval + "px";
}

if(kill monster1) {++points; respawn();} //add a point and respawn
if(kill monster2) {++points; respawn()} //add a point and respawn

if(killedBYmonster) {died();} //run died()

function died() {
points -= 3; //lose 3 points for dying
setTimeout("respawn()", 2500); //set timeout to respawn,
}

setInterval(setStyle, 500); //constantly updates size of "hp" div


The setInterval is wrong I know, but it was the only thing that would cause the div to change, but it doesn't grow as the points variable increases.

I tried to call setStyle(baseval) a 100 different ways and from various places, inside my
if(kill monster1) {++points; setStyle();} //also setStyle(baseval) or setStyle(points), etc, nothing works..

Ideally, only when points change, would the bar adjust......I've tried calling setStyle(baseval) inside my respawn() function, thinking it would run it each time I kill a monster and it's set to respawn, but nothing will actually change the bar size except setInterval(setStyle, msdelay)

With setInterval(setStyle, msdelay) the healthbar adjusts constantly but it never gets above a sliver regardless of how high my score gets......

Any ideas? The variable "points" is made inside a js for a canvas game, the hp div isn't within the canvas, does that make a difference? I wanted to make some bars outside the canvas like health bar, progression bar, etc tied to variables but can't get the first one to work....

vwphillips
12-13-2011, 09:43 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var points=50; //this is adjusted by other functions when you win/lose points
var baseval = points; //i want baseval to grow as points increase

function setStyle(points) {
var div = document.getElementById("hp");
div.style.width = points + "px";
baseval = points;
}

//if(kill monster1) {++points; respawn();} //add a point and respawn
//if(kill monster2) {++points; respawn()} //add a point and respawn

//if(killedBYmonster) {died();} //run died()

function died() {
points -= 3; //lose 3 points for dying
points=Math.max(points,0);
setStyle(points);
//setTimeout("respawn()", 2500); //set timeout to respawn,
}


/*]]>*/
</script></head>

<body>
<div id="hp" style="width:50px;height:30px;background-Color:red;" ></div>
<input type="button" name="" value="Die" onmouseup="died();"/>
</body>

</html>