javascript - Return an Array doesnt work

I am trying to create a surface, where the whole page is full of divs, where everyone of them can be clicked and the color can be changed through the HTML5 Colorpicker.

------------------------------------------------------------------

* This Part is Only if you want really to understand what I am trying to do*

I would only create a bunch of <input type='color'>, but the problem is, you caot tu the style of them off completely, there is always a grey line in the button and the area to be colored is always smaller then the size of the input element. So I am trying to hide them behind the array of divs and call a click on the <input> element behind the clicked div via jquery or js.

------------------------------------------------------------------

My problem is:

I am pushing my Divs and Inputs into global defined Arrays but they seem to be empty if I console.log them outside of the function. So I thought I retu the array, but it is not working for me and I haven't found a solution online, so... I need help here. Here is my code:

<body> 
<script>
body = document.body;

a = [];
b = [];
c = [];
i = [];
d = [];
d.length = 0;
d[0] = 'banana';

window.onload = function(){

    conInput = document.createElement('div');
    conInput.setAttribute('id','conInput');
    document.body.appendChild(conInput);

    conDiv = document.createElement('div');
    conDiv.setAttribute('id','conDiv');
    document.body.appendChild(conDiv);

    u = body.offsetWidth/1920 - 1;
    v = body.offsetHeight/1080 - 1; 

    for(u=0;u<1901;u+=20){
        a.push(u);
        for(v=0; v<1061; v+=20){
            b.push(v);
            var newDiv = document.createElement("div"); 
            newDiv.id = b.length-1;         
            conDiv.appendChild(newDiv);         
        }
    }

    for(u=0;u<1901;u+=20){
        //a.push(u);
        for(v=0; v<1061; v+=20){
            c.push(v);
            var newInput = document.createElement("input");
            newInput.setAttribute('type','color');
            newInput.id = c.length-1;

            conInput.appendChild(newInput);
        }
    }
}

setTimeout(nodeList, 0); // have to this so the function runs after the DOM has been loaded

function nodeList(){

    console.log(d);

    divs = body.getElementsByTagName('div');
    inputs = body.getElementsByTagName('input');



    for(var l=0; l<inputs.length;l++){

        if(inputs[l].id !== "conInput"){

            i.push(inputs[l]);

            };
    }    

    for(var k=0; k<divs.length; k++){
        //console.log(k);
        if(divs[k].id !== "conDiv" && divs[k].id !== "conInput"){

            d.push(divs[k]);

            };
    }

    retu d;
}

console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(i);

</script>

And if you have a suggestion about an easy solution for my idea I am always open for any criticism. Thank you!