Spot the bug - #24

programming web dev
1

There is a subtle bug here.

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.

Arthur

2

The loop runs one step too far: i <= items. length hits items[items. length] (undefined) and then . classList blows up. Change it to i < items. length (or just items. forEach(li => li. classList. add('active'))).

3

Yep, that off-by-one is classic — items[items. length] is always undefined, so classList will throw. i usually just go items. forEach(el => el. classList. add('active')) and never think about indices again.