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?

I think it's because you're trying to add a number with a string `'_p'`. Try `document.getElementById(i.toString()+'_p').style.color='#D8D8D8';` — ElliotM, Jan 03 '14 at 20:06
@ElliotM — No, `1 + "x"` is `"1x"`. Numbers are stringified automatically when you try to add a string to them. — Quentin, Jan 03 '14 at 20:11
@Alberto Rossi Specify a class for coloring multiple tags with common characteristics. — giannis christofakis, Jan 03 '14 at 20:37

Kamil Šrot · Answer 1 · 2017-08-23T09:09:21.853

2

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

edited Aug 23 '17 at 09:09

answered Jan 03 '14 at 20:09

Kamil Šrot

score 1 · Accepted Answer · answered Jan 03 '14 at 20:11

1

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

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

answered Jan 03 '14 at 20:11

ElliotM

score 0 · Answer 3 · answered Jan 03 '14 at 20:09

0

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')

answered Jan 03 '14 at 20:09

Jack

giannis christofakis · Answer 4 · 2014-01-05T21:30:35.203

0

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 */
}

edited Jan 05 '14 at 21:30

answered Jan 03 '14 at 20:16

4 Answers4