Unable to iterate over DOM's childElementCount result

[mmarquardt610]

We use the inline code suite in the learning platform for Bloc, and we're running into an issue trying to teach DOM manipulation in javascript. We define a simple DOM in the HTML tab, and attempting to iterate over the list items in an unordered list is throwing a TypeError.

JS tab:

var x = document.getElementById("list").childElementCount;
console.log(x, typeof x);
var num = 4;
console.log(num, typeof num);
for (i = 0; i < x; i++) {
     console.log(i);
}

HTML tab:

<h3>Shirts</h3>
<ul id='list'>
    <li>Biker Jacket</li>
    <li>Mens Shirt</li>
</ul>

When running, the console prints this error:

TypeError: Cannot convert object to primitive value

Screencap of issue:

If we update the JS tab to iterate until an explicitly defined integer on line 6, we can iterate correctly, with no error:

var x = document.getElementById("list").childElementCount;
console.log(x, typeof x);
var num = 4;
console.log(num, typeof num);
for (i = 0; i < num; i++) {
     console.log(i);
}

Working results:

[R-V-S]

Interesting. The problem relates to the way that the JS script is given access to the DOM. I should have a fix for this in the next day or so.

[mmarquardt610]

Hey @R-V-S , Any update on this? Did you find the issue?

[R-V-S]

@mmarquardt610 Try version 0.10.2 – it was being overly aggressive about preventing code from running when doing a dry-run to ensure there are no infinite loops.