CSS Modification with Javascript

Question

I'm able to change the CSS ID of an item with Javascript through a simple code like this:

<div id="teststyle1">Test Text, 1-1</div>

<button type="button" onclick="document.getElementById('teststyle1').style.color='red'"> Test 1 </button>

However, when I try to add in a second line of text (like in the full example below) with the same ID, only one of them gets changed. Is there a simple fix to this issue where both of the items would be changed?

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#teststyle1{
text-decoration: underline;
}
</style>
</head>
<body>

<div id="teststyle1">Test Text, 1-1</div>
<div id="teststyle1">Test Text, 1-2</div>

<button type="button" onclick="document.getElementById('teststyle1').style.color='red'">Test 1</button>

</body>
</html>

Any help is greatly appreciated!

IDs should be unique, maybe go for a approach with using class names? developer.mozilla.org/en-US/docs/Web/API/… - works from IE9+ — hank
– hank, Commented Nov 3, 2013 at 8:56
Actually, instead of changing styles inline, set another class name, it's much cleaner to have all styles in one place — hank
– hank, Commented Nov 3, 2013 at 8:57
This is really basic. Before starting JavaScript, you might want to get the hang of CSS and HTML. — Bram Vanroy
– Bram Vanroy, Commented Nov 3, 2013 at 9:05

Paul Draper · Accepted Answer · 2013-11-03 09:02:47Z

2

Ids should be unique. You want to use a class instead.

<div class="teststyle1">Test Text, 1-1</div>
<div class="teststyle1">Test Text, 1-2</div>

<button type="button" onclick="Array.prototype.forEach.call(document.getElementsByClassName('teststyle1'), function(element) { element.style.color='red'; })"> Test 1 </button>

Though for readability and good style, I recommend:

<div class="teststyle1">Test Text, 1-1</div>
<div class="teststyle1">Test Text, 1-2</div>

<button id="my_button" type="button"> Test 1 </button>
<script>
    document.getElementById('my_button').onclick = function() {
        Array.prototype.forEach(document.getElementsByClassName('teststyle1'), function(element) {
            element.style.color='red';
        });
    };
</script>

edited Nov 3, 2013 at 9:02

answered Nov 3, 2013 at 8:57

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niklas Over a year ago

NodeList does not inherit the Array prototype, and as such, does not have a forEach method. You can make it into an array with [].slice.call.

Maina M Lyf Wickey · Accepted Answer · 2013-11-03 09:04:02Z

0

You should not use ids on different elements. Try using class and then javascript will change all elements under the class

answered Nov 3, 2013 at 9:04

Maina M Lyf Wickey

1

Comments

Sarath Babu Nuthimadugu · Accepted Answer · 2013-11-03 09:09:57Z

0

id is unique it's always apply first matching if you want go for class

<div class="class1">Test Text, 1-1</div>
<div class="class1">Test Text, 1-2</div>

in jquery you can access based on index

$('.class1:eq(0)').html();
$('.class1:eq(1)').html();

answered Nov 3, 2013 at 9:09

Sarath Babu Nuthimadugu

8812 gold badges10 silver badges21 bronze badges

Collectives™ on Stack Overflow

CSS Modification with Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related