0

I want to change the color of more than one element in a page by clicking on a button. I really thought this would be very but I am having lots of difficulty achieving it. My code as follows changes the first element - and I know this is because i am using document.getElementById but when i change it to document.getElementByClass, it stops working at all. I have tried inline styles and internal styles to no avail. Can someone please please please explain how to do this. I doubt this is impossible. Thanks. 

<html>
<head>
<style>
#p1{color:#4d982b;}
</style>
<script type="text/javascript">
function ChangeStyle()
{
document.getElementByClass("p1").style.color="#aaaaaa";
}
</script>
</head>
<body>

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

<input type="button" onclick="ChangeStyle()" value="Change style" />

</body>
Elaine McGovern
  • 269
  • 7
  • 24

5 Answers5

2

this is typically done using a class rather than an id.

There can be only one id per page. change your code to

<p class="myclass">Hello world!</p>
<p class="myclass">Hello world!</p>

Then use javascript to alter the class color attributes

Here is a link which will help How to getElementByClass instead of GetElementById with Javascript?

Community
  • 1
  • 1
Olivier Refalo
  • 50,287
  • 22
  • 91
  • 122
  • Thanks so much for your comment but I knew that but when I do document.getElementByClass("p1").style.color="#aaaaaa"; nothing happens. – Elaine McGovern Feb 24 '12 at 16:37
  • 1
    please check the link I just added, it should solve your issue. – Olivier Refalo Feb 24 '12 at 16:37
  • This should really have been marked as the answer. If you want it to work in IE the answer is in the link above, and this was the first answer. You need to create a custom implementation of the `getElementByClassName` method. – anothershrubery Feb 24 '12 at 16:59
1

You can't have elements on the page with the same id. id is meant to be unique to a single element so when you call getElementById("p1") it will only select the first id with value of "p1".

The solution is to use classes, or have 2 getElementById calls, with 2 different id's.

anothershrubery
  • 20,461
  • 14
  • 53
  • 98
  • Ah I knew that would be an issue but when I change id to class, nothing works. What am I doing wrong?

    Hello world!

    Hello world!

     – Elaine McGovern Feb 24 '12 at 16:39
  • 1
    Check the link provided by Olivier. http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript You need to loop through each of the elements with the class `"p1"` – anothershrubery Feb 24 '12 at 16:40
  • Correct, so what she needs to do is `getElementsByClassName()` as mentioned here: http://stackoverflow.com/questions/7480496/javascript-getelementbyclass – PREEB Feb 24 '12 at 16:41
  • Here's a working fiddle example. Note the `[1]` to change the second element. So you want to loop through the items using their length. http://jsfiddle.net/pJXh9/ – PREEB Feb 24 '12 at 16:43
  • Thanks a million, half of my problem was that it wasn't working with IE but as I only need it to work on android I am happy. – Elaine McGovern Feb 24 '12 at 16:56
0

IDs must be unique, so use class names instead:

<p class="p1">Hello world!</p>
<p class="p1">Hello world!</p>

document.getElementsByClassName results in an array. You must loop through each element:

var list = document.getElementsByClassName("p1");
for (var i = 0; i < list.length; i++) {
    list[i].style.color="#aaaaaa";
}
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
0

I believe you're thinking of document.getElementsByClassName - maybe someone can clarify for me but I believe getElementById is the only singular return on getting elements.

So lets say you're trying to get all elements with the class "foo"...

var elem = document.getElementsByClassName('foo')
for (var i = 0;i < elem.length; i++)
{
elem[i].style.color = '#aaaaaa'
}

There's probably syntax errors up there but I think you get the general idea~

Snuffleupagus
  • 6,365
  • 3
  • 26
  • 36
  • Thanks so much for helping me with this. I had gotten to hair pulling stage. Quick question, any way of getting the same working with IE? Or should I just accept that it is not supported? – Elaine McGovern Feb 24 '12 at 16:55
  • 1
    It's because you don't have a DOC TYPE declared at the top. :] To clarify, if no doc type is declared internet explorer defaults to "quirks mode" - certain features that are available normally are not available in quirks mode. http://www.w3schools.com/html5/tag_doctype.asp – Snuffleupagus Feb 24 '12 at 17:02
0

Getelementbyid method only works with one element. Try getelementsbyid which returns an array.

manueldahmen
  • 71
  • 2
  • 6