Почему в результате сложения получается Not-a-Number?

Question

[aliasmark]

Также сравнивал item.offsetWidth саму с собой на NaN, выдало, что не является. Откуда на выходе NaN не ясно.

Answer 1

[Rsa97]

Вы берёте childNodes, куда входят не только элементы, но и текстовые узлы между элементами (переводы строк).

// [object NodeList] (7)
[#text,<div/>,#text,<div/>,#text,<div/>,#text]

Так вот у этих текстовых узлов нет параметра offsetWidth, соответственно вы складываете undefined, получая NaN.

- let box = document.querySelector(".box").childNodes;
+ let box = document.querySelector(".box").children;
- box.forEach((item) => {
+ for (let item of box) {
- })
+ }