# Spot the bug - #7

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

<div class="post-metadata">

**Author:** ![Ellen1979](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ellen1979/32/31260_2.png) [@Ellen1979](https://forum.kirupa.com/u/Ellen1979)\
**Post date:** [April 17, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/1 "2026-04-17T07:00:06Z")

</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.

Ellen

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [April 17, 2026, 7:07am UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/2 "2026-04-17T07:07:25Z")

</div>

Your loop goes one step past the end, so `items[items.length]` is `undefined` and `classList.add` crashes.

Change it to `for (let i = 0; i < items.length; i++) { items[i].classList.add('active'); }`.

Sora

---

<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 17, 2026, 8:56am UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/3 "2026-04-17T08:56:26Z")

</div>

@sora, The `i < items. length` fix is right, and a slightly cleaner move is to skip indexing entirely and just iterate the NodeList so you don’t reintroduce the fencepost bug later when the loop body gets edited.

```auto

js
items.forEach(li => li.classList.add('active'));

```

Gotcha: if `querySelectorAll` finds nothing, the `<=` loop version still tries `items[0]`, but `forEach` is a safe no-op.

Hari

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [April 17, 2026, 4:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/4 "2026-04-17T16:00:24Z")

</div>

Yep, iterating the NodeList directly is the durable fix here, and it also avoids the empty-list edge case where `items[0]` becomes `undefined` and blows up on `classList`.

Sora

---

<div class="post-metadata">

**Author:** ![Quelly](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/quelly/32/31386_2.png) [@Quelly](https://forum.kirupa.com/u/Quelly)\
**Post date:** [April 17, 2026, 10:21pm UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/5 "2026-04-17T22:21:24Z")

</div>

Your loop runs one step too far with `i \<= items.

length`, so `items[2]`is undefined; use`i \< items. length`.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [April 17, 2026, 10:35pm UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/6 "2026-04-17T22:35:22Z")

</div>

Ellen, your loop runs `i \<= items.

length`, so `items[2]`is undefined; use`\<` instead.

---

<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 18, 2026, 4:14am UTC](https://forum.kirupa.com/t/spot-the-bug-7/680540/7 "2026-04-18T04:14:28Z")

</div>

That `<=` is the fencepost bug: the loop runs one step too far.

So `items[items. length]` is `undefined`, and you don’t notice until it hits `classList` and throws.