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 :)

jsfiddle.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -