Assigning a CSS Style to the width prooperty from an array does not work (JQUERY)

Question

When I try to update the width property of the css with a value from the array (a percentage value) and assign it to the.css() property of my object it will not change the width, but if I enter it directly then it works:

function updateCurrentAssetUploadProgressBox() {

var activeWorkflows = new Array();

activeWorkflows[0] = "15"; //progress percentage
activeWorkflows[1] = "MyTestAsset.jpg"; //asset name

var percentComplete = activeWorkflows[0] + "%"; // THIS WILL NOT WORK

$('#progressBox #metaAndLinksRow #itemName').html(activeWorkflows[1]);
//$('#progressBox #progressRow #progressBar').css('width', 'percentComplete');    // DOES NOT WORK
$('#progressBox #progressRow #progressBar').css('width', '15%');    // WORKS FINE

}

Thank you.

Answer 1

No quotes. You're passing 'percentComplete' as a string. Remove the quotes in the argument:

function updateCurrentAssetUploadProgressBox() {

    var activeWorkflows = new Array();

    activeWorkflows[0] = 15; //progress percentage (INT should be unquoted)
    activeWorkflows[1] = "MyTestAsset.jpg"; //asset name

    var percentComplete = activeWorkflows[0] + "%";

    $('#progressBox #metaAndLinksRow #itemName').html(activeWorkflows[1]);
    $('#progressBox #progressRow #progressBar').css('width', percentComplete); // Pass as a variable, unquoted

}

Answer 2

Replace:

$('#progressBox #progressRow #progressBar').css('width', 'percentComplete');

with:

$('#progressBox #progressRow #progressBar').css('width', percentComplete);

Answer 3

Remove the quotes around percentComplete.

Change:

$('#progressBox #progressRow #progressBar').css('width', 'percentComplete'); 

to

$('#progressBox #progressRow #progressBar').css('width', percentComplete);