Home/ Questions/Q 4021810
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:23:51+00:00

I have a page (actually, about thirty or so) where I’m trying to change

  • 0

I have a page (actually, about thirty or so) where I’m trying to change the classname of specific elements based on a querystring variable. Everything works fine except for this part, I’m getting a really 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 is properly returning the number of elements (7, from the html below) with the classname ‘hitArea’, but when I iterate through hitAreas, it’s only changing the classnames for every other element on the page. Halfway through it returns undefined as a value for alert(hitAreas[hitArea]); assumably because it’s trying to reference array elements beyond an index of 6.

Body of the 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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Šime Vidas pointed out that getElementsByClassName retuns a live nodeList, meaning the collection stored will be updated as things are changed (here the class attribute).

    var hitAreas = document.getElementsByClassName('hitArea'),
    hitAreasLength = hitAreas.length;

while ( hitAreasLength-- > 0) {
    hitAreas[hitAreasLength].className = 'hitArea_practice';
}

    I’m not sure if this is the nicest code, but it works 🙂

    jsFiddle.

    • 0