[RESOLVED] [JavaScript] Setting up a new array

[dday9]

I'm having some difficulties setting up a new array in JavaScript. Here is the relevant code:

This is declared at the global level

var availableCanvases;

And this is in a function

availableCanvases = new Array("00", "01", "02", "10", "11", "12", "20", "21", "22");

Whenever I use Firebug to debug my web page, it won't execute the line after I set the variable as a new Array which telling me that the array is not setting. So what am I doing wrong? By the way here is the full code:

// Globals
var playerTurn;
var playerWins;
var cpuWins;
var availableCanvases;

window.onload = function() {
	// Set the default values for the globals(except for those we set in NewGame())
	playerWins = 0;
	cpuWins = 0;

	// Update the statistics
	UpdateStats();
	
	// Setup handlers for the controls
	// Upper row
	document.getElementById("00").onclick = canvas_Click;
	document.getElementById("01").onclick = canvas_Click;
	document.getElementById("02").onclick = canvas_Click;

	// Middle row
	document.getElementById("10").onclick = canvas_Click;
	document.getElementById("11").onclick = canvas_Click;
	document.getElementById("12").onclick = canvas_Click;

	// Bottom row
	document.getElementById("20").onclick = canvas_Click;
	document.getElementById("21").onclick = canvas_Click;
	document.getElementById("22").onclick = canvas_Click;

	// Start a new game
	NewGame();
}

function canvas_Click() {
	// Only execute the code IF the canvas is in our availableCanvases array
	if (availableCanvases.indexOf(this.id) >= 0) {
		var sender = document.getElementById(this.id);
		var context = sender.getContext("2d");
		context.fillStyle = "#FF0000";
		context.fillRect(0, 0, sender.width,  sender.height);
		
		// Remove the canvas from the availableCanvases array
		availableCanvases.splice(availableCanvases.indexOf(sender.id), 1);
	}
}

function ClearCanvas(id) {
	var sender = document.getElementById(id);
	var context = sender.getContext("2d");
	context.clearRect(0, 0,  sender.width,  sender.height);
}

function ChangeTurn() {
	// set playerTurn to what it is not
	playerTurn = !playerTurn;
}

function UpdateStats() {
	document.getElementById("playerWins").innerHTML = playerWins;
	document.getElementById("cpuWins").innerHTML = cpuWins;
}

function NewGame() {
	// Player1 always goes first
	playerTurn = True;
	
	// All canvases are available again
	availableCanvases = new Array("00", "01", "02", "10", "11", "12", "20", "21", "22");
	
	// Update the statistics
	UpdateStats();
	
	// Clear any existing canvases
	ClearCanvas("00");
	ClearCanvas("01");
	ClearCanvas("02");
	ClearCanvas("10");
	ClearCanvas("11");
	ClearCanvas("12");
	ClearCanvas("20");
	ClearCanvas("21");
	ClearCanvas("22");
}

[kfcSmitty]

I don't see anything wrong with it. Do you get an error?

I remember reading a bunch of threads somewhere saying to avoid using

var tmp = new Array("1","2","3","4");

And instead to use

var tmp = ["1","2","3","4"];

Because it acts funky sometimes. I can't remember the specific reason, but you may be running into one such scenario.

On a second look, I also notice that you've declared

playerTurn = True;

True is not valid in javascript; it must be lowercase. Right now it is looking for an object called "True".

Also, and this is just me being nitpicky (so feel free to tell me to shove it :P), why are you calling

ClearCanvas("00");
ClearCanvas("01");
ClearCanvas("02");
ClearCanvas("10");
ClearCanvas("11");
ClearCanvas("12");
ClearCanvas("20");
ClearCanvas("21");
ClearCanvas("22");

Instead of just looping through your array and passing the value?

[dday9]

True is not valid in javascript; it must be lowercase. Right now it is looking for an object called "True".

That fixed my problem! I'm still trying to get use to the case sensitivity :/

Instead of just looping through your array and passing the value?

I didn't think about it, but I will do it now

[tr333]

Using JSLint is a quick and easy way to find problems in your JS code. Just make sure to set the browser:true setting, or else it will complain about missing the window/document global objects that are normally provided by the browser.