# Spot the bug - #2

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

<div class="post-metadata">

**Author:** ![sarah\_connor](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sarah_connor/32/31258_2.png) [@sarah\_connor](https://forum.kirupa.com/u/sarah_connor)\
**Post date:** [April 12, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/1 "2026-04-12T07:00:08Z")

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

Sarah

---

<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 12, 2026, 7:07am UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/2 "2026-04-12T07:07:21Z")

</div>

@sarah_connor, the loop goes one step too far with `i <= items.length`, so the last pass hits `items[items.length]` (undefined) and `classList.add` crashes.

Fix by using `i < items.length` or looping `for (const li of items)` and adding `active` to each `<li>`.

BobaMilk

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [April 12, 2026, 8:49am UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/3 "2026-04-12T08:49:17Z")

</div>

@BobaMilk, yep—the `<=` makes it run one extra time and you end up calling `classList.add` on `undefined`.

Also `querySelectorAll` gives you a NodeList, so loop it directly or spread it into an array if you need array methods.

Yoshiii

---

<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 12, 2026, 10:21am UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/4 "2026-04-12T10:21:21Z")

</div>

Yep, the `<=` makes the loop run one extra time, so you hit `undefined` and `classList.add` blows up.

Also `querySelectorAll` returns a NodeList, so `document.querySelectorAll('...').forEach(el => el.classList.add('...'))` avoids the index mess.

Ellen

---

<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 12, 2026, 11:21am UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/5 "2026-04-12T11:21:08Z")

</div>

Also double - check the selector actually matches something before adding classes, because an empty NodeList won’t run but a single null from querySelector will still crash on classList.

BobaMilk

---

<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 12, 2026, 5:35pm UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/6 "2026-04-12T17:35:17Z")

</div>

Yep — `querySelectorAll` gives you an empty list so the loop just does nothing, but `querySelector` can return `null` and `el.classList.add(...)` will throw.

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 12, 2026, 6:42pm UTC](https://forum.kirupa.com/t/spot-the-bug-2/680351/7 "2026-04-12T18:42:12Z")

</div>

Also watch the timing: if those `.foo.bar` elements get rendered later, running `document.querySelectorAll('.foo.bar')` too early will always return an empty NodeList.

Quelly