在JS中更改div宽度的百分比

I have a very basic script that calculates and changes the width of a div but its not working it keeps giving a 100 % result .

My script is like this:

<script>
var hp = <? echo $row['hp']; ?>;
var max = <? echo $row['maxhp']; ?>;
var perc = Math.round(hp/max * 100);
if(perc > 100) perc = 100;
else if(perc < 0 ) perc = 0;
d = document.getElementById('health');
d.style.width= perc+"%";
</script>

<div id="health" style="background-color:green;min-height:5px;"></div>

The PHP numbers are showing correct in the JS as:

var hp = 500;
var max = 2500;

Any ideas why it might not be working ?

You have to wait until the document (DOM) to load first.

//head

$(function(){      //same as "onload" (jQuery)
    var hp = 500,
        max = 2500,
        perc = Math.round(hp/max * 100);
    if(perc > 100){
        perc = 100;
    }else if(perc < 0 ){
        perc = 0; 
    }
      //have to wait until DOM loaded, or else it return "not found"
    d = document.getElementById('health');
    d.style.width= perc+"%";
    alert(perc+"%");   
});

DEMO: http://jsfiddle.net/DerekL/uUBVd/

enter image description here

You are executing your JavaScript before the element has loaded. Position your script block after the div in your html.

Edit:

Or, place your code in an onload handler.

window.onload = function () {
    var hp = <? echo $row['hp']; ?>; 
    var max = <? echo $row['maxhp']; ?>; 
    var perc = Math.round(hp/max * 100); 
    if(perc > 100) perc = 100; 
    else if(perc < 0 ) perc = 0; 
    d = document.getElementById('health'); 
    d.style.width= perc+"%"; 
}

Or, don't use JavaScript at all. Just emit the value directly into the div's style attribute.

Edit: Also, don't use document.write() after the page has been loaded. If you comment out your call to document.write(), it works: http://jsfiddle.net/2KLQq/

Notice that if you uncomment the document.write() in my jsfiddle and run it, it no longer works.

Your problem might be because your <script> gets executed before <div> is rendered, try swapping around those elements and see if it works.

<div id="health" style="background-color:green;min-height:5px;"></div>

<script>
var hp = <? echo $row['hp']; ?>;
var max = <? echo $row['maxhp']; ?>;
var perc = Math.round(hp/max * 100);
if(perc > 100) perc = 100;
else if(perc < 0 ) perc = 0;
d = document.getElementById('health');
d.style.width= perc+"%";
</script>

Its working, see a demo

So, the problem is the script is running before the element is loaded on the DOM. Put the script after the HTML

<div id="health" style="background-color:green;min-height:5px;"></div>
<script>
var hp = <? echo $row['hp']; ?>;
var max = <? echo $row['maxhp']; ?>;
var perc = Math.round(hp/max * 100);
if(perc > 100) perc = 100;
else if(perc < 0 ) perc = 0;
d = document.getElementById('health');
d.style.width= perc+"%";
</script>

Problem, you need to detect when the DOM is loaded and then run your calculations.

You can use window.onload to detect when the window has loaded and run a function. If you are using jQuery you can use $(document).ready(); or $(window).load();.

<html>
<head>
<script type="text/javascript">
    window.onload = function(){
        var hp = 500; //hardcoded, normally outputted via php <?=$row['hp']; ?>
        var max = 2500; //hardcoded, normally output via php <?=$row['maxhp']; ?>
        var perc = Math.round(hp/max * 100);

        if(perc > 100)
        {perc = 100;}

        else if(perc < 0 )
        {perc = 0;}

        d = document.getElementById('health');
        d.style.width= perc+"%";
    };
</script>
</head>
<body>
    <div id="health" style="background-color:green;min-height:5px;"></div>
</body>
</html>