javascript - Access element of array inside object jQuery -

i want fill canvas color that's element of array inside object , element index should i code seems wrong. variables inside color1 declared , contain string hex value color.

var colorsobj = {     color1: [orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin] }  function drawcanvas(color) {     for(var = 1; < 10; i++){     $('.app').append('<canvas class="shadescolors" id="shade'+i+'"  width="100" height="100">');     var canvas = document.getelementbyid('shade'+i);     var context = canvas.getcontext('2d');      canvas.width = window.innerwidth / 3;     cc = canvas.width;     radius = cc/2-10;     canvas.height = canvas.width;     context.beginpath();     context.arc(cc/2, cc/2, cc/2-10, 0, math.pi*2, true);     alert(colorsobj.color[i]);     context.fillstyle = colorsobj.color[i];     context.fill();     context.linewidth = 2;     context.strokestyle = '#8a8a8a';     context.stroke();     } }  drawcanvas('color1'); 

the alert doesn't fire either.

the main problem here need use colorobj[color] color list instead of colorobj.color, because want use value of color variable select specific color list within colorobj. (i assume may later have color2 entry inside colorobj, etc., correct?)

also you're missing first element of color list starting loop 1, , 10 loop limit should use .length of color list instead of being hard coded.

you're missing var on couple of variables inside loop, , since set cc, canvas.width, , canvas.height same value may in 1 statement.

as simplification tip, isn't necessary give canvas element sequential id , use getelementbyid() find it. instead can save reference element when create , use that.

i took out width= , height= in html code canvas element; redundant since setting width , height in code.

finally, please indent code! :-)

so might try this:

var colorsobj = {     color1: [ orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin ] }  function drawcanvas( color ) {     var colorlist = colorsobj[color];     for( var = 0;  < colorlist.length;  i++ ) {         var $canvas = $('<canvas class="shadescolors">').appendto('.app');         var canvas = $canvas[0];         var context = canvas.getcontext('2d');          var cc = canvas.width = canvas.height = window.innerwidth / 3;         var radius = cc/2-10;         context.beginpath();         context.arc(cc/2, cc/2, cc/2-10, 0, math.pi*2, true);         context.fillstyle = colorslist[i];         context.fill();         context.linewidth = 2;         context.strokestyle = '#8a8a8a';         context.stroke();     } }  drawcanvas('color1');