Results 1 to 2 of 2

Thread: Updating div style.width based on variable

  1. #1
    Join Date
    Dec 2011
    Posts
    34
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Updating div style.width based on variable

    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....
    Last edited by lmbarns; 12-12-2011 at 11:40 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    lmbarns (12-13-2011)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •