How to resolve undefined array properties in Javascript?

Question

I'm trying to initialize custom color pickers based on however many canvas elements are on a page. I'm trying to loop over canvasArray and for each index getContext, create a new Image, set a click listener, dynamically store selected color.

I'm having issues with undefined array properties. such as: Uncaught TypeError: Cannot read property 'push' of undefined at handleColorPickers.

I've also tried contextArray[i] = canvasArray[i[.getcontext('2d'); for each time i've tried to store data to any of the arrays. (contextArray, imageArray, dataArray, rgbaArray).

function handleColorPickers () {
var canvasArray, contextArray, imageArray, dataArray, rgbaArray = new Array();

// store each canvas in array
var canvasArray = document.getElementsByTagName( "canvas" );

// loop through all canvas elements on page
for ( var i = 0; i < canvasArray.length; i++ ) {

    // get context of canvas element store dynamically
    contextArray.push( canvasArray[i].getContext( "2d" ) );

    // construct new image
    imageArray.push( new Image( 250, 250 ) );
    imageArray[i].onLoad = () => contextArray[i].drawImage( imageArray[i], 0, 0, imageArray[i].width, imageArray[i].height );
    imageArray[i].src = "../img/color-wheel-opt.jpg";

    canvasArray[i].onclick = function ( mouseEvent /* dynamic? */) {
        // get color selection data
        dataArray.push( contextArray[i].getImageData( mouseEvent.offsetX, mouseEvent.offsetY, 1, 1 ) );

        rgbaArray.push( dataArray[i].data );

        canvasArray[i].siblings( $( 'input' ) ).val( "rgba(" + rgbaArray[i][0] + "," + rgbaArray[i][1] + "," + rgbaArray[i][2] + "," + rgbaArray[i][3] + ")" );

        //toggle visibility 
        canvasArray[i].parent().parent().toggle();
    }
}
}

i want all images drawn to the canvas, listen for a click on the image, capture data about the location of the click, and toggle visibility after color selection. all dynamically, however 'undefined' array properties are issues when im trying to define them.

How do i define all of these arrays dynamically?

Blue · Accepted Answer · 2019-02-03 01:39:47Z

1

The main issue is your opening line:

var canvasArray, contextArray, imageArray, dataArray, rgbaArray = new Array();

You're only initializing the last array (rgbaArray). You need to declare all your arrays individually:

var canvasArray = [], contextArray = [], imageArray = [], dataArray = [], rgbaArray = [];

You can see it demonstrated below:

var test, test2 = [];

console.log('test', test);
console.log('test2', test2);

var test3 = [], test4 = [];


console.log('test3', test3);
console.log('test4', test4);

answered Feb 3, 2019 at 1:39

Blue

23k7 gold badges69 silver badges102 bronze badges

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

Comments

Милош Вељковић · Accepted Answer · 2019-02-03 01:47:34Z

0

When .js read this : var canvasArray, contextArray, imageArray, dataArray, rgbaArray = new Array()

This mean every of this var will be undefined and the last one will be array!? Try to change this and run it again!

answered Feb 3, 2019 at 1:47

Милош Вељковић

1878 bronze badges

Collectives™ on Stack Overflow

How to resolve undefined array properties in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related