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
Post a Comment