Clever Geek Handbook

How can I use Javascript variable as CSS width value?

I have a scholarship donation plan and would like to see the width of the bar expand as the donation amount increases. I currently have a set of bars where it can expand by changing the "width" with CSS. I am not that familiar with Javascript, but I tried using a for loop and if the statements are ok gives the result that I am looking for. The result I'm looking for is a loop in which if the amount provided (integer) is provided (0 <amount <500), the result will be 0. If the amount provided is (500 <), the result will be 1. If provided donation amount (1000 <amount <1500), the result will be 2. If the donated amount provided (1500 <amount <2000), the result will be 3.If the donated amount provided (2000 <amount <2500), the result will be 4. If the donated amount provided is (2500 <3000), the result will be 5. I need this result as an integer that will represent the variable for my equation, to determine the number of pixels needed for the bandwidth to match the donation amount correctly. Here is the code I have come up with so far. I need help achieving my goal. At the moment, the code only displays the last number. Thank you in advance!to determine the number of pixels needed for the bandwidth to match the donation amount correctly. Here is the code I have come up with so far. I need help achieving my goal. At the moment, the code only displays the last number. Thank you in advance!to determine the number of pixels needed for the bandwidth to match the donation amount correctly. Here is the code I have come up with so far. I need help achieving my goal. At the moment, 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>
+3


source to share


6 answers


Check it. 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";
}
0


source


Comparison in javascript doesn't work this way. You must 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 is evaluated as (0 < 1163 < 500)

This is further evaluated as (true < 500)

Since 1 == true

, they all expect until true

, so x

there will always be 5.

+5


source


you should avoid the boolean test and optimize your code in a way that will give you the output you expect:
x=Math.round(amount/500+.5)-1;


http://jsfiddle.net/scraaappy/erL37s8k/

+3


source


To change an width

element, you don't need to change the CSS, you can change it directly with javascript.

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

(assuming what is the id

item "progress"

and what is the value you want in pixel w

).

0


source


come back when you know your range. if it is less than a certain number, it cannot 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

0


source


First, you need a boolean operator for a suitable purpose like x> 0 && x <= 50

Let's say in html,

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

In css,

#bar { width: 100px; }

can be accessed

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

or

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


source






More articles:


All Articles