Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript | Uncaught TypeError: Cannot set property 'color' of undefined

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)

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.

Below is my code and what I have tried:

<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';">

    <img src="images/ace.png" id="ace_service">
    <p id="ace_title">Ace Service</p>

    <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">
    <p class="ace_features">
        Outstanding IT Support
    </p>

    <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">
    <p class="ace_features">
        Outstanding IT Support
    </p>
like image 997
Eclipse Avatar asked Mar 16 '23 01:03

Eclipse


2 Answers

When you use getElementById you receive a one element, so it works. When you use getElementsByClassName you receive a collection of elements (containing two elements in your case), so it doesn't work.

The following line should work:

getElementsByClassName('ace_features')[0].style.color='black'

but it would be much better to use a normal script blocks instead of inline

like image 154
Alexander Dayan Avatar answered Apr 25 '23 12:04

Alexander Dayan


This line:

document.getElementsByClassName('ace_features')

returns an array of elements or undefined

You should change your mouseover event rather to an external function, so you could iterate all the class names as such

function onMouseOver() {
  document.getElementById('ace_service').src = 'images/ace_hover.png';
  document.getElementById('ace_title').style.color = '#2C81B7';
  var elements = document.getElementsByClassName('ace_features'), i, len;
  
  for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = '#2C81B7';
  }
}

function onMouseOut() {
  document.getElementById('ace_service').src = 'images/ace.png';
  document.getElementById('ace_title').style.color = 'black';
  var elements = document.getElementsByClassName('ace_features'), i, len;
  
  for (i = 0, len = elements.length; i < len; i++) {
    elements[i].style.color = 'black';
  }
}
<div class="service_level effect8" onmouseover="onMouseOver()" onmouseout="onMouseOut()">

  <img src="images/ace.png" id="ace_service">
  <p id="ace_title">Ace Service</p>

  <img src="images/icon_tick.png" style="float:left;padding:3px 4px 0px 15px;">
  <p class="ace_features">
    Outstanding IT Support
  </p>

  <img src="images/icon_tick.png" style="float:left;padding:3px 4px 0px 15px;">
  <p class="ace_features">
    Outstanding IT Support
  </p>
</div>
like image 31
Icepickle Avatar answered Apr 25 '23 11:04

Icepickle