when should callback be executed

Question

I'm trying to log my colors variable after the forEach block completes execution.

As the code stands now it simply returns an empty array. I guess I'm not console.logging at the right moment, but I'm confused about when that should happen.

Basically, what I need is to be able to use my colors array to execute other functions on it. But before I do that I have to make sure that the createParentComponent function finished executing.

Thanks in advance!

    var colors = [];

    function createParentComponent(array){
    var count = 0;

    array.forEach(function(image){
       var parent = document.createElement('div');
       parent.style.height = '50px';
       parent.style.width = '50px';
       parent.className = 'parent';

       var imgData = createImgandColorDiv(image);
       var img = imgData[0];
       var cdiv = imgData[1];

       parent.appendChild(img);
       parent.appendChild(cdiv);
       document.getElementById('container').appendChild(parent);
       count ++;
       console.log(count);
    });

    if(count === array.length){console.log(colors);}

}

function createImgandColorDiv(url){
    var img = document.createElement('img');
    img.style.height = '50px';
    img.style.width = '50px';

    var cdiv=document.createElement('div');
    cdiv.style.height = '50px';
    cdiv.style.width = '50px';
    cdiv.className = 'cdiv';

    img.onload = function(){
        var hsl = getDominantHSLColor(img);
        colors.push(hsl);
        cdiv.style.backgroundColor = 'hsl('+hsl[0]+','+hsl[1]+'%,'+hsl[2]+'%)';
    };

    img.src = url;
    return [img, cdiv]; 
}

I was trying to inspire myself from this.

You are shadowing `count` inside of your `forEach` function (it's now pointing at the `cdiv` element). When you attempt to transform a DOM node into a number it results (rightly) in `NaN`. — Sean Vieira, Feb 09 '16 at 16:51

score 3 · Answer 1 · answered Feb 09 '16 at 16:51

3

You are declaring a count variable both in createParentComponent and the anonymous inner function that you use in forEach (var count = imgData[2];).

As you can't increment (++) whatever ends up being count there, you'll get NaN.

I'd suggest ~~renaming the inner count variable~~ getting rid of the inner count variable altogether, since createImgandColorDiv only returns two values anyway. :)

answered Feb 09 '16 at 16:51

AKX

152,115
15
115
172

oh, thank you, it's a typo. I was trying different things. I'll rewrite my question then, because now my colors array is logging, but it's empty. Yet I know that that's just because I'm logging it too soon, because when I retry in the browser console, once all images are loaded, I do see the array isn't empty. – Vera Feb 09 '16 at 17:06

score 0 · Answer 2 · answered Feb 09 '16 at 18:01

I ended up doing this, so adding my conditional to my createImgandColorDiv:

function createImgandColorDiv(url){
    var img = document.createElement('img');
    img.style.height = '50px';
    img.style.width = '50px';

    var cdiv=document.createElement('div');
    cdiv.style.height = '50px';
    cdiv.style.width = '50px';
    cdiv.className = 'cdiv';

    img.onload = function(){
        var c = document.getElementsByClassName('cdiv');
        var hsl = getDominantHSLColor(img);
        colors.push(hsl);
        cdiv.style.backgroundColor = 'hsl('+hsl[0]+','+hsl[1]+'%,'+hsl[2]+'%)';
        if(colors.length===c.length){console.log(colors)};
    };

    img.src = url;
    return [img, cdiv]; 
}

I'm open to hear of better ways to write this :)

when should callback be executed

2 Answers2