How to apply CSS style to all elements with same ID using one button?

Question

My idea was to create a button to hide/show all hidden text (Hide by highlighting the text in black, show by making the background color of the text transparent). But the codes, as shown below, only works for the 1st element with the given ID ("p2").

Javascript:

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {  
        test.value = "Open Spoiler"; 
        document.getElementById("p2").style.backgroundColor="black";  
    }
    else  
    {  
        test.value = "Hide Spoiler"; 
        document.getElementById("p2").style.color="black";
        document.getElementById("p2").style.backgroundColor="transparent";  
    }
}

HTML:

<input onclick="change()" type="button" value="Open Curtain" id="button1"></input>
<br>
<span id="p2">Hidden text</span> Test for more <span id="p2">Hidden text</span> test again. <span id="p2">Hidden text</span>

How would I make all the elements with similar ID to change its CSS style using only 1 button? Thanks.

You shouldn't have multiple elements with the same `id`, an `id` is supposed to be unique. — robertc, Feb 11 '13 at 17:48
`id` should be unique, you need to add a specific class to your `span` elements — koopajah, Feb 11 '13 at 17:48

score 3 · Accepted Answer · answered Feb 11 '13 at 17:55

3

Your code is only every going to update one element, because getElementById will only ever return one element (because, as we've said, id is supposed to be unique). If you need to mark multiple elements as related use a class instead. Here is a working example using class, JavaScript:

function change() {
    var test = document.getElementById("button1");
    var els = document.getElementsByClassName("p2");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.backgroundColor = "black";
        }
    } else {
        test.value = "Hide Spoiler";
        for (var i=0; i<els.length; i++) {
            els[i].style.color = "black";
            els[i].style.backgroundColor = "transparent";
        }
    }
}

HTML:

<input onclick="change()" type="button" value="Hide Spoiler" id="button1"></input>
<br>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

If you need it to work in browsers too old for getElementsByClassName, try using jQuery. It makes this sort of thing lots easier

answered Feb 11 '13 at 17:55

robertc

74,533
18
193
177

The question is tagged `[jquery]` so not sure if the OP is using it already, wants to use it, or just has no idea how to use it. – Sparky Feb 11 '13 at 17:58
@Sparky With no evidence of jQuery use in the question, I just assumed the OP just used the tag because it was popular and related. – robertc Feb 11 '13 at 18:02
Relax... I'm not criticizing your answer, I'm criticizing the OP for potential tag-spam, while expanding upon your last sentence in the answer. – Sparky Feb 11 '13 at 18:08
@Sparky It's OK, I'm relaxed, just explaining why I ignored the tag. – robertc Feb 11 '13 at 18:08
The reason why I tag jquery is because I allow anyone to use jquery for this question in case if jquery is more convenient than javascript. Thanks for the code. It works!! – Ong Feb 12 '13 at 16:12

score 0 · Answer 2 · answered Feb 11 '13 at 17:50

0

Use a class instead of an id. Then use document.getElementsByClassName("p2") which will return an array of the matching elements and loop over them.

answered Feb 11 '13 at 17:50

Whymarrh

13,139
14
57
108

I thought there was no direct way to get a Class in pure JS? – Tom Oakley Feb 11 '13 at 17:52
1

There's no direct way to get anything in an HTML document in pure JS. You need a DOM API for that and browsers will supply one. `getElementsByClassName` is well supported [except for IE 8 and earlier](http://caniuse.com/#search=getElementsByClassName). – Quentin Feb 11 '13 at 17:54
1

Didn't know about that new spec. Thanks for mentioning it :) – Tom Oakley Feb 11 '13 at 17:55

score 0 · Answer 3 · edited May 23 '17 at 11:58

0

id is unique, so it's not valid to have multiple instances [http://www.tizag.com/cssT/cssid.php] - you could however use a class and then select all instance with $(".className") (assuming jQuery). This answer How to getElementByClass instead of GetElementById with Javascript? contains a lot of helpful pointers

edited May 23 '17 at 11:58

Community

1
1

answered Feb 11 '13 at 17:53

Offbeatmammal

7,970
2
33
52

score 0 · Answer 4 · answered Feb 11 '13 at 17:58

As others have said, do not use the same id more than once on a single page. Instead, use a class name or data attributes. And since you marked your question with jQuery:

function change()
{
    var test = document.getElementById("button1");
    if (test.value=="Hide Spoiler") 
    {
        test.value = "Open Spoiler"; 
        $('.className').css('background-color','transparent');
    }
    else 
    {
        test.value = "Hide Spoiler"; 
        $('.className').css('background-color','transparent');
        $('.className').css('color','black');
    }
}

If you're going to use jQuery, I'd also recommend using the button's click event like such:

$('#button1').click(function() {
  ...
});

score 0 · Answer 5 · answered Feb 11 '13 at 18:09

I oppose the Same ID concept... But Try like below will be a answer to your question....

Fiddle Example : http://jsfiddle.net/RYh7U/65/

CSS

.mask
{
color : red;
}

Javascript :

function change()
{
 var elements = document.getElementById("p2").parentNode.getElementsByTagName("span");
    for(var i=0; i<elements.length; i++)
      elements[i].className = "mask";
}

score 0 · Answer 6 · answered Feb 11 '13 at 18:39

<input onclick="change()" type="button" value="Open Curtain" id="button1"/>
<br/>
<span class="p2">Hidden text</span> Test for more <span class="p2">Hidden text</span> test again. <span class="p2">Hidden text</span>

then the jquery:

function change() {
    var test = document.getElementById("button1");
    if (test.value == "Hide Spoiler") {
        test.value = "Open Spoiler";
        $('.p2').css('background-color','black')

    }
    else {
        test.value = "Hide Spoiler";
        $('.p2').css('background-color', 'transparent')

    }
}

I've tested it

How to apply CSS style to all elements with same ID using one button?

6 Answers6

Linked

Related