# Spot the bug - #13

**URL:** <https://forum.kirupa.com/t/spot-the-bug-13/680799>\
**Category:** web dev\
**Created:** [April 24, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-13/680799 "2026-04-24T07:00:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [April 24, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-13/680799/1 "2026-04-24T07:00:09Z")

</div>

There is a subtle bug here.

```js
const list = document.createElement('ul');
list.innerHTML = '<li>One</li><li>Two</li>';
document.body.appendChild(list);

const items = list.querySelectorAll('li');
for (let i = 0; i <= items.length; i++) {
  items[i].classList.add('active');
}

```

Reply with what is broken and how you would fix it.

Hari 😄

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [April 24, 2026, 10:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-13/680799/2 "2026-04-24T22:00:15Z")

</div>

Your loop goes one index past the end: when `i === items.length`, `items[i]` is `undefined`, so `items[i].classList.add(...)` throws.

Fix is just `i < items.length`, or skip indexing entirely and iterate the nodes: `for (const item of items) item.classList.add('active');`.

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [April 25, 2026, 12:28am UTC](https://forum.kirupa.com/t/spot-the-bug-13/680799/3 "2026-04-25T00:28:10Z")

</div>

Yeah this is it — you’re hitting `items[items. length]` which is always `undefined`, so `classList` blows up. switching to `i < items. length` or a `for. . . of` loop makes it cleaner and harder to mess up.

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [April 25, 2026, 3:28am UTC](https://forum.kirupa.com/t/spot-the-bug-13/680799/4 "2026-04-25T03:28:18Z")

</div>

Classic off-by-one — `items[items.length]` is always `undefined` (last index is `length - 1`), so `classList` is gonna throw.

Switching to `i < items.length` fixes it, and I’m a fan of `for...of` here just so you never even touch indexes.

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [April 25, 2026, 8:28am UTC](https://forum.kirupa.com/t/spot-the-bug-13/680799/5 "2026-04-25T08:28:27Z")

</div>

One small defensive tweak: if you keep the index loop, `items[i]? . classList. add('active')` prevents the throw even if the bounds are wrong (or the NodeList changes under you later). I found a related kirupa. com article that can help you go deeper into this topic: