CSS Class Not Being Applied To All Similar Elements

Question

I have a page that has three buttons in three containers. The first button in each container has the same id, the second button in each container has the same id, and the third button in each container has the same id. I have a Javascript script that accepts incoming information and changes the color of the text in the buttons accordingly. Unfortunately when the script senses that a change needs to be made and attempts to apply the corresponding CSS, only the buttons in the first container get the CSS applied. I'm really not understanding why every element with the same id is not getting the CSS applied to it.

The Javascript action:

document.getElementById('button_1').className = "buttonActive";

The button elements:

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

There's not enough context here as to what the purpose of each of these buttons is. It would probably be be better if you were using Event Delegation: http://davidwalsh.name/event-delegate — cimmanon, Oct 18 '12 at 20:33

Kevin Boucher · Answer 1 · 2012-10-18T20:29:38.677

5

This is happening because document.getElementById is returning the first element it finds with the specified id.

This is because an ID is assumed to be unique.

Consider using class names instead and select them this way:

document.getElementsByClassName( 'text' )

edited Oct 18 '12 at 20:29

answered Oct 18 '12 at 20:03

Kevin Boucher

16,426
3
48
55

Anoop · Answer 2 · 2012-10-18T20:07:42.317

You can select only one dom element using getElementById. you should use class instead of id in case you want to select multiple element.

you should not use same id for more than two elements in same document.

Note : I replaced id with class for all buttons same thing you should also apply for span.

modified code:

JS:

document.getElementsByClassName('button_1').className = "buttonActive";

HTML:

<button class="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button class="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button class="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button class="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button class="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button class="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button class="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button class="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button class="button_3" class="button"><span id="button_text_3">Button 3</span></button>

score 1 · Answer 3 · answered Oct 18 '12 at 20:03

In DOM, every element must have a unique id. When you do a "document.getElementById()" on multiple elements having the same id, only the 1st object is returned.

Instead use the "name" attribute with document.getElementsByName method.

Sample code:

var nameArray = document.getElementsByName("elementName");

for(var i=0; i<nameArray.length; i++){
nameArray[i].className = "myClass";
}

score 0 · Answer 4 · answered Oct 18 '12 at 20:03

0

Ids should be unique across the entire page.

Use classes instead if you wish to use the same name across page elements.

answered Oct 18 '12 at 20:03

devdigital

34,151
9
98
120

grasingerm · Answer 5 · 2012-10-18T20:42:06.990

document.getElementById()

is only meant to select one DOMelement. ids should be unique. If you want to group elements you should specify class names.

<button class="button_1"> ...
<button class="button_2"> ...
<button class="button_3"> ...

<button class="button_1"> ...
<button class="button_2"> ...
...

You select all of the first buttons with:

document.getElementByClassName('button_1')

You can select all of the buttons with:

document.getElementsByTagName('button')

In CSS:

/* first buttons */
.button_1 { }

/* all buttons */
button {}

your code:

var btns = document.getElementsByClassName("button_1");
for(var i = 0; i < btns.length(); i++){
    var prev_name = btns[i].className;
    btns[i].className = prev_name + " buttonActive";
}

CSS Class Not Being Applied To All Similar Elements

5 Answers5