如何使用Javascript变量作为CSS宽度的值？

Question

I have a designed a scholarship donation bar and would like the bar width to extend as the donation amount increases. I currently have the bar set where it can extend by changing the "width" using CSS. I am not as familiar with Javascript but I attempted to use a for loop and if statements in order yield the result I am looking for. The result I am looking for is a loop in which if the donation amount (integer) provided is (0 < amount < 500), the result will be 0. If the donation amount provided is (500 < amount < 1000), the result will be 1. If the donation amount provided is (1000 < amount < 1500), the result will be 2. If the donation amount provided is (1500 < amount < 2000), the result will be 3.If the donation amount provided is (2000 < amount < 2500), the result will be 4.If the donation amount provided is (2500 < amount < 3000), the result will be 5. I need this result to be an integer that will represent a variable for an equation I derived in order to determine the amount of pixels required for the width of the bar in order to properly match the donation amount. Here is the code I came up with so far. I need assistance with making my goal come to fruition. As of right now the code only displays the last number. Thank you in advance!

<script>
{
    var amount = 1163; //example amount
    var x = 0;

    if (0 < amount < 500) {
        x = 0;
    } if (500 < amount < 1000) {
        x = 1;
    } if (1000 < amount < 1500) {
        x = 2;
    } if (1500 < amount < 2000) {
        x = 3;
    } if (2000 < amount < 2500) {
        x = 4;
    } if (2500 < amount < 3000) {
        x = 5;
    }
        document.write(x)
}
</script>

Answer 1

Comparisons in javascript don't work that way. You need to specify each logical comparison with ANDS and/or ORS.

if (0 < amount && amount < 500) { ... } // or x < 500 whichever logical proceed

According to operator precedence, this evaluates to (0 < 1163 < 500)

This further evaluates to (true < 500) Since 1 == true , these are all evaulating to true , thus x will always be 5.

Answer 2

you should avoid logical test and optimize your code that way, which give you the result you expect :
x=Math.round(amount/500+.5)-1;
http://jsfiddle.net/scraaappy/erL37s8k/

Answer 3

To change the width of an element you don't need to modify the CSS, you can change it directly using javascript.

document.getElementById("progress").style.width = w + "px";

(assuming the id of the element is "progress" and that the value you want in pixel is w ).

Answer 4

Check this out.. http://jsfiddle.net/wdth4eme/3/

{
var amount = 1163; //example amount
var x = 0;

if (0 < amount && amount < 500) {
    x = 0;
} if (500 < amount && amount < 1000) {
    x = 1;
} if (1000 < amount && amount < 1500) {
    x = 2;
} if (1500 < amount && amount < 2000) {
    x = 3;
} if (2000 < amount && amount < 2500) {
    x = 4;
} if (2500 < amount && amount < 3000) {
    x = 5;
}
   document.querySelector(".inner").style.width=Math.floor(100/x)+"px";
}

Answer 5

return when you know your in range. if its less than a certain number it cant be higher.

function getValue(value) {
if(value < 500) return 0;
if(value < 1000) return 1;
if(value < 1500) return 2;
...
...
}

var size = getValue(1235)

//returns 2

Answer 6

Firstly you need logical operator for a matching purpose eg x>0 && x<=50

Let us say in html,

<div id="bar">....</div>

In css,

#bar { width: 100px; }

can be accessed by

document.getElementById('bar').style.width= "500px";

or

document.getElementById('bar').style.width= x + "px";