Change CSS attributes on part of a HTML element's innerHTML with Javascript

Question

I have been trying to find a way to change part of the innerHTML of several elements with the class .studentYear, but I keep getting a JavaScript undefined error. Here's what I am trying.

JavaScript:

document.getElementsByClassName('studentYear').innerHTML.indexOf(" ").css('color', '#800000');

HTML:

<div class="accordionContainer">
      <div class="studentYear">Freshman (A1 Schedule)</div>
        <div class="accordionContent" style="display:none;">
            <p class="studentTerm">Fall</p>
           <p>Content</p>
        </div>
</div>

I see now that it is a collection (array type). I need to access the innerHTML for each item in the collection and change the style attribute on only part of the innerHTML, in this case everything in parentheses "(A1 Schedule)". I still get the undefined error if following the suggestions made below.

Have you tried to define the collection of elements as a variable, first? Then loop through each of the elements and run the innerHTML.index.... on each element that way? What exactly is undefined? Do you have any more errors? — Geoff James
– Geoff James, Commented Oct 20, 2016 at 19:55
You are getting undefined because indexOf returns, well, an index, which is a number. Also, you are trying to use innerHTML on the result of getElementsByClassName, which returns an array of DOM elements... Break it up a little bit, and the solution will become apparent. — ZombieTfk
– ZombieTfk, Commented Oct 20, 2016 at 19:58
You're getting undefined because document.getElementsByClassName(...) returns an array, and arrays don't have an innerHTML property. — Ian McLaird
– Ian McLaird, Commented Oct 20, 2016 at 19:59
You can't call innerHTML in array. You have to foreach on them. You also can't call css method on a string. Simply get the innerHTML and make string.replace on it. I don't know what you except so I can't help you much... — cmizzi
– cmizzi, Commented Oct 20, 2016 at 20:00
getElementsByClassName returns a HTMLCollection which is an array like object. You cannot call innerHTML on this object, you must iterate (jquery selectors abstract this step). Speaking of, css is a jquery method, not a dom node method - you're looking for style which is an object containing each style property. Not sure the point of the indexOf. Can you give an example of your expected behavior / output? — Damon
– Damon, Commented Oct 20, 2016 at 20:05

samanime · Accepted Answer · 2016-10-20 20:04:58Z

5

There are a number of problems with what you're trying.

document.getElementsByClassName returns an HTMLCollection, which is kind of like an array, but not quite, so you can't call innerHTML on it directly
indexOf(" ") will give you the first index of the space, which would possibly be before the element. It would also give you a number.
css() doesn't exist in vanilla JavaScript, that's a jQuery thing.

It looks like you're wanting to set that element to use color: #000000. That means you actually need to set the style attribute.

This code would do the trick, applying it to every one of them with the class studentYear.

Array.prototype.forEach.call(document.getElementsByClassName('studentYear'), function (element) {
    element.style = 'color: #F00';
});

The Array.prototype.forEach.call lets us treat the HTMLCollection as an array and loop through it. Then for each element, we'll set it's style attribute to color: #F00 (or whatever you want, I used red to make it obvious).

If you need to support older browsers, you shouldn't access the style attribute directly, instead use setAttribute instead:

element.setAttribute('style', 'color: #F00');

answered Oct 20, 2016 at 20:04

samanime

26.8k17 gold badges99 silver badges155 bronze badges

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

1 Comment

Steve Voltmer Over a year ago

This gets the collection, but there is still no way to access the innerHTML.indexOf(). I need to change the attribute for only part of the innerHTML from each item in the collection.

user1289451 · Accepted Answer · 2016-10-20 20:18:35Z

0

As the comments have said, you have to loop through the objects and set each one since it is similar to an array. Something like this:

var items = document.getElementsByClassName('studentYear');

for (var i = 0; i < items.length; i++) {
  items[i].setAttribute('style', 'color: #F00');
}

Edit: Just saw samanime's answer, which seems a little more elegant in my opinion.

edited Oct 20, 2016 at 20:18

answered Oct 20, 2016 at 20:09

user1289451

9219 silver badges22 bronze badges

Collectives™ on Stack Overflow

Change CSS attributes on part of a HTML element's innerHTML with Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related