One javascript function disables other functions

Question

I have 3 functions:

window.onload = function() {       
    canvas();   
    changeColor();
    blockSize();    
}

The problem is with third "blockSize()". It not running when I place it at the bottom of window.onlod function; + when I place it at the top, it disables all functions below it. Here is the code (calculates width and height in percentages of all blocks with className "size"):

function blockSize() {
    var block = document.getElementsByClassName("size");    
    for (var i in block) {       
        var width = Math.round(block[i].clientWidth/document.documentElement.clientWidth*100);
        var height = Math.round(block[i].clientHeight/document.documentElement.clientHeight*100);
        var span = document.createElement("span");
        span.innerHTML = width+"x"+height+"%";
        block[i].appendChild(span);
    }    
}

Noticed, that problem appers when I appendChild (last line). When I remove it, other functions works properly. Also tried to put < span> manually inside a div and use this javascript line instead (same results):

block[i].firstChild.innerHTML = width+"x"+height+"%";

!!! When I use only innerHTML, everything works fine. And I understand, that I can use something like this, and it will work:

block[i].innerHTML = "<span>"+width+"x"+height+"</span>";

This question appears to be off-topic because it is about a problem which could have been solved if the OP had simply looked at the console. — user663031
– user663031, Commented Dec 3, 2014 at 16:35
Here is the console code, it didn't tell me, that problem is in loop: Uncaught TypeError: Cannot set property 'innerHTML' of undefined — Mark1ra
– Mark1ra, Commented Dec 3, 2014 at 16:45
Basic debugging. Based on the error message, a quick insertion of a console.log(block[i]) or a breakpoint in the debugger to look at things would have show you that you were iterating things you didn't want to iterate and then, at least, you could have included much better info in your question about the problem or perhaps seen yourself what was going on. It's very important to learn basic debugging steps so you can examine what is going on yourself in the affected area. — jfriend00
– jfriend00, Commented Dec 3, 2014 at 16:47

user1106925 · Accepted Answer · 2014-12-03 16:28:03Z

1

The problem most likely comes from improperly using for-in on an HTMLCollection. This will include other items besides DOM elements.

when it encounters the block[i].appendChild(span), it'll throw an error if block[i] isn't an element and therefore doesn't have an .appendChild() method.

Use a for loop instead.

function blockSize() {
    var block = document.getElementsByClassName("size");    
    for (var i = 0; i < block.length; i++) {       
        var width = Math.round(block[i].clientWidth/document.documentElement.clientWidth*100);
        var height = Math.round(block[i].clientHeight/document.documentElement.clientHeight*100);
        var span = document.createElement("span");
        span.innerHTML = width+"x"+height+"%";
        block[i].appendChild(span);
    }    
}

answered Dec 3, 2014 at 16:28

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

3 Comments

Mark1ra Over a year ago

Thanks, problem is fixed. Didn't expect that problem can be in for-in. For all next times will use only for loop.

user1106925 Over a year ago

@Mark1ra: yeah, in JS when dealing with Arrays or Array-like objects, it's best to use for.

jfriend00 Over a year ago

A classic example of why one should never iterate an array with for/in.

Collectives™ on Stack Overflow

One javascript function disables other functions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related