Javascript change label color in a loop

Question

I have a lot of labels I created on a php page, they all have an id like

I have to change their color to #D8D8D8 and I thought to do it using a for loop:

for(i=1;i<13;++i) {
 document.getElementById(i+'_p').style.color='#D8D8D8';
}

By the way Firefox tells me that document.getElementById(...) is null. Any suggestion?

Answer 1

First of all, don't start id value by number / it's breach of HTML specification

Answer 2

 for(var i=1;i<6;i++) {
   document.getElementById(i+'_p').style.color='#D8D8D8';
 }

Notice I'm using i++ and not ++i

Answer 3

I would add a class to all of the labels like

<label id="5_p" class="colorOrSomething">

then instead you can use the class to look them all up and change the color

document.getElementsByClassName('colorOrSomething')

Answer 4

Adding int with string should work. Make sure you have specified i as var .

As an alternative to javascript you could use CSS3 Attribute Selectors

label[id*='_p'] {color:#D8D8D8 }

Class identifiers are allowed to start with a number, but ID identifiers are not.

[id='1_p'] {
 /* does work */
}

#1_p {
  /* doesn't work */
}