undefined CSS property to a JS array element

UPDATE:

Since it looks like you are creating some kind of "pong" or "breakout" game, I decided to take my first stab at HTML canvas and do it myself for fun. Here is a simple version that shows how to:

1. draw two paddles on a canvas (original author)
2. keep track of the "boxes" for the paddles in an array (original author)
3. use a loop via setInterval to redraw the canvas as it gets updated (original author)
4. use the keyboard to move shapes around on HTML canvas (my code)

See the fiddle for working demo and full code: http://jsfiddle.net/z4ckpcLc/1/

I will not post the full code because I didn't write most of it.. I used the example from this site for the code for drawing the boxes and for keeping track of them in an array: http://simonsarris.com/project/canvasdemo/demo1.html

The function I added to this example is the arrowKeyMove() handler, wired up to the onkeydown event of document.body via this line: document.body.onkeydown = arrowKeyMove;

function arrowKeyMove(e) {
    var direction = 0; // -1 means left, 1 means right, 0 means no change
    var moveFactor = 10; // higher factor = more movement when arrow keys pressed
    var arrowKeyUsed = false; // to indicate which 'paddle' we are moving
    switch (e.which) {
        case 37:
            // left arrow (upper paddle)
            direction = -1;
            arrowKeyUsed = true;
            break;
        case 39:
            // right arrow (upper paddle)
            direction = 1;
            arrowKeyUsed = true;
            break;
        case 65:
            // "a" key for left strafe (lower paddle)
            direction = -1;
            break;
        case 68: 
            // "d" key for right strafe (lower paddle)
            direction = 1;
            break;
    }
    var boxIndex = 1; // box index defaults to lower paddle
    if (arrowKeyUsed) { // if using arrow keys, we are moving upper paddle
        boxIndex = 0; 
    }
    var maxX = 240; // constrain movement to within 10px of box borders (240 == canvas width minus paddle width minus padding)
    var minX = 20;
    var box = boxes[boxIndex]; // grab the box; we will update position and redraw canvas
    if((direction < 0 && box.x >= minX) || (direction > 0 && box.x <= maxX))
    {
      // move the box in the desired direction multiplied by moveFactor
      box.x = box.x + (direction * moveFactor);
      invalidate(); // invalidate canvas since graphic elements changed
    }
}

ORIGINAL ANSWER:

Array items use zero-based indexing.

If you only have two paddles like you said, you must use index 1, not 2. And if you want to access the first paddle, use 0, not 1. You probably want your for loop to use var i=0 instead, and basically change places you are checking 1 to 0.

For example:

paddles[0].style.backgroundColor="red";  // paddle 1
paddles[1].style.backgroundColor="red";  // paddle 2

Also, var array = [2] does not create a two-array element. It creates a one-array element with an integer value of 2

For DOM elements you may want something like this:

<div id='paddle1'></div>
<div id='paddle2'></div>

<script type='text/javascript'>
var paddles = [];
paddles[0] = document.getElementById('paddle1');
paddles[1] = document.getElementById('paddle2');
paddles[0].style.backgroundColor="red";  // paddle 1 is red
paddles[1].style.backgroundColor="orange";  // paddle 2 is orange
</script>