title: Change CSS attributes on part of a HTML element's innerHTML with Javascript
body: <p>I have been trying to find a way to change part of the innerHTML of several elements with the class <code>.studentYear</code>, but I keep getting a JavaScript <code>undefined</code> error. Here's what I am trying.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>document.getElementsByClassName('studentYear').innerHTML.indexOf(" ").css('color', '#800000');
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="accordionContainer"&gt;
        &lt;div class="studentYear"&gt;Freshman (A1 Schedule)&lt;/div&gt;
          &lt;div class="accordionContent" style="display:none;"&gt;
              &lt;p class="studentTerm"&gt;Fall&lt;/p&gt;
             &lt;p&gt;Content&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>