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

Code:

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?

Code:

//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

Code:

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

Code:

<!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>

Thread: Updating div style.width based on variable

Thread Tools

Search Thread

Updating div style.width based on variable

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions