css - Javascript for...in seems to only return every other index in array -
this question has answer here:
i have page (actually, thirty or so) i'm trying change classname of specific elements based on querystring variable. works fine except part, i'm getting weird result...
var hitareas = document.getelementsbyclassname('hitarea'); alert(hitareas.length); for(hitarea in hitareas) { alert(hitareas[hitarea]); hitareas[hitarea].classname = 'hitarea_practice'; }
the alert(hitareas.length); line returning number of elements (7, html below) classname 'hitarea', when iterate through hitareas, it's changing classnames every other element on page. halfway through returns undefined value alert(hitareas[hitarea]); assumably because it's trying reference array elements beyond index of 6.
body of html page:
<body onload="togglehotspothints();"> <div> <img src="dashboard1.jpg" width="1440" height="795" /> <div class="hitarea" style="top: 55px; left: 230px; width: 72px; height: 17px;" onclick="gotopage('batchreconcile/1-claimsreconcilemenu');"></div> <div class="hitarea" style="top: 55px; left: 319px; width: 72px; height: 17px;" onclick="gotopage('eligibility/pp elig 1');"></div> <div class="hitarea" style="top: 55px; left: 409px; width: 72px; height: 17px;" onclick="gotopage('reports/5-dashboard reports list');"></div> <div class="hitarea" style="top: 137px; left: 260px; width: 145px; height: 21px;" onclick="gotopage('dash2_messages');"></div> <div class="hitarea" style="top: 223px; left: 247px; width: 126px; height: 19px;" onclick="gotopage('claimslist_failed');"></div> <div class="hitarea" style="top: 242px; left: 247px; width: 126px; height: 14px;" onclick="gotopage('payerreportlist');"></div> <div class="hitarea" style="top: 258px; left: 247px; width: 126px; height: 14px;" onclick="gotopage('adm/1_trending graph');"></div> </div>
live demo: http://jsfiddle.net/simevidas/le6un/
Šime vidas pointed out getelementsbyclassname
retuns live nodelist, meaning collection stored updated things changed (here class
attribute).
var hitareas = document.getelementsbyclassname('hitarea'), hitareaslength = hitareas.length; while ( hitareaslength-- > 0) { hitareas[hitareaslength].classname = 'hitarea_practice'; }
i'm not sure if nicest code, works :)
Comments
Post a Comment