Question

57

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

rated 0 times [ 59] [ 2] / answers: 1 / hits: 43390 / 9 Years ago, thu, may 14, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zahrafrancisr

Add To Favorites

Follow

Total Points: 176

Total Questions: 105

Total Answers: 99

Location: Svalbard and Jan Mayen

Member since Sun, Sep 25, 2022

2 Years ago

answered 9 Years ago domeniccolti · Accepted Answer

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>