CODEWITHSUNDEEP
javascriptjqueryhtml
user258122
user258122

Reputation: 39

Change td width to percentage using javascript

Here is my issue for programming at work I have to use a program that I won't name, no big deal there. But I need to create some responsive design for a progress bar and am having some issues changing the widths to percentages using js. It seems to be an easy issue, I know what I need to do if the td elements where labeled with ids instead of just classes. I can't get getElementsByClassName to work for me but have no issue if I can manipulate the html and insert ids and use getElementsById. So basically my question is what am I doing wrong in the coding of my js that its not performing properly or is there another option I am missing.

Here is the js fiddle that I can't get to work: http://jsfiddle.net/xHfm7/ document.getElementsByClassName("progLf").width = document.getElementsByClassName("progLf").width + "%";

Here is the fiddle showing it working with Id grab: http://jsfiddle.net/5uHZ9/

document.getElementById("progLf").width = document.getElementById("progLf").width + "%";

Upvotes: 1

Views: 111

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101868

The clue is in the name of the function getElementsByClassName. Note it is "Elements", plural. It returns a collection of elements, even if there is only one match. Therefore you have to select one of them to operate on using the function item().

Assuming you want the first match, try:

document.getElementsByClassName("progLf").item(0).width = blah

Upvotes: 2

Related Questions