Trying to re-invent myself. New to my laptop, Windows 8, Javascript and HTML5. The symptom is the sequence and content of the alert messages:
(line39): body script
(alert line 21):GetNextCard
(line 25): deck[24] = undefined
24, undefined, 51
(line 41):next card isundefined
(alert line 17): deck[18] = 5d
then the "1c.gif (ace of clubs) does appear on the canvas (see last line before </body> below)

It appears that the body script invoking the GetNextCard() function is running before the <body "onLoad="Deal()">

Any ideas?

I also suspect that I may be having scope issues with my deck[] array. My readings suggest Javascript treats "this." differently than, say, php -- but I can't get my arms around how that might affect me here.

Appreciate your thoughts.


Here's the code
<!DOCTYPE html>
<title>Simple Solitare</title>
<meta name="" content="">
<script type="text/javascript">
	deck=new Array(53);
	cardsLeft = 52;
	function Deal(){
			deck[i] = i+"c";
			deck[i+13] = i+"d";
			deck[i+26] = i+"h";
			deck[i+39] = i+"s";
		} // end for
		cardsLeft = 52;
		alert("(alert line 17): deck[18] = " + deck[18]);
	} // end function Deal

	function GetNextCard() {
		alert("(alert line 21): GetNextCard");
		if(cardsLeft < 1) return false;
		// get a number between 1 and the number of remaining cards
		i = Math.floor(Math.random() * cardsLeft) + 1;
		alert("(line 25): deck["+ i +"] = "+ deck[i]);
		var nextCard = deck[i];			// pull that card
		deck[i] = deck[cardsLeft];      // replace that card with the last in the deck
		if (cardsLeft >45) alert (i +", " + nextCard + ", " + cardsLeft);
		return nextCard;
	} // end function GetNextCard

<body onload="Deal()">
<canvas id="board" width="800px" height="600px"></canvas>
<script type="text/javascript">
alert("(line 39): body script");
var nextCard = GetNextCard();
alert("(line 41): next card is" + nextCard);
<p> <img src="1c.gif"/> </p>