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


i have div changes css of elements inside when hovered on/off. error when mouseover , mouseout, , color not changed (the error in title of question)

whats interesting first 2 changes work (changing image , changing color of id 'ace_title' mouseover , mouseout of 'ace_feature' generates error.

below code , 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 support     </p>      <img src="images/icon_tick.png" style="float: left; padding: 3px 4px 0px 15px;">     <p class="ace_features">         outstanding support     </p> 

this line:

document.getelementsbyclassname('ace_features') 

returns array of elements or undefined

you should change mouseover event rather external function, iterate class names 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;        (i = 0, len = elements.length; < 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;        (i = 0, len = elements.length; < 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 support    </p>      <img src="images/icon_tick.png" style="float:left;padding:3px 4px 0px 15px;">    <p class="ace_features">      outstanding support    </p>  </div>


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -