title: Javascript | Uncaught TypeError: Cannot set property 'color' of undefined
body: <p>I have an div which changes the css of elements inside it when hovered on/off.
  However I get an error when I mouseover and mouseout, and the color is not changed (the error is in the title of this question)</p>
  
  <p>Whats interesting is the first two changes work (changing the image and changing color of id 'ace_title' but the mouseover and mouseout of 'ace_feature' generates the error.</p>
  
  <p>Below is my code and what I have tried:  </p>
  
  <pre><code>&lt;div class="service_level effect8" onmouseover="getElementById('ace_service').src='images/ace_hover.png';
      getElementById('ace_title').style.color='#2C81B7';
      getElementsByClassName('ace_features').style.color='#2C81B7';"
      onmouseout="getElementById('ace_service').src='images/ace.png';
      getElementById('ace_title').style.color='black';
      getElementsByClassName('ace_features').style.color='black';"&gt;
  
      &lt;img src="images/ace.png" id="ace_service"&gt;
      &lt;p id="ace_title"&gt;Ace Service&lt;/p&gt;
  
      &lt;img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;"&gt;
      &lt;p class="ace_features"&gt;
          Outstanding IT Support
      &lt;/p&gt;
  
      &lt;img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;"&gt;
      &lt;p class="ace_features"&gt;
          Outstanding IT Support
      &lt;/p&gt;
  </code></pre>