How can I use a Javascript variable as a value for CSS width?

How can I use a Javascript variable as a value for CSS width?

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!

Answer by Sterling Archer for How can I use a Javascript variable as a value for CSS width?

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 by 6502 for How can I use a Javascript variable as a value for CSS width?

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 by Ramanathan Muthuraman for How can I use a Javascript variable as a value for CSS width?

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 by tmcc for How can I use a Javascript variable as a value for CSS width?

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 by Ahsan Khan for How can I use a Javascript variable as a value for CSS width?

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

Let us say in html,

....
  

In css,

#bar { width: 100px; }  

can be accessed by

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

Answer by scraaappy for How can I use a Javascript variable as a value for CSS width?

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/

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72