Need some help with my prototype code, Just began using it last night

[ballhogjoni]

What is wrong with my code? I want to have it display the ROOM_ROW_TEMPLATE onload, but its not doing anything.

 

var ROOM_ROWS_CONTAINER;
var NUMBER_OF_ROOMS;

var TEMPLATE_SYNTAX = /(^|.|\r|\n)(\(\{(.*?)\}\))/;

var CHILD_AGE_TEMPLATE = new Template(
'<select id="child_age_{I}_{N}"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><select>'
,
TEMPLATE_SYNTAX
)

var ROOM_ROW_TEMPLATE = new Template(
'Adults <select id="adults_{I}"><option>1</option><option>2</option><option>3</option><option>4</option></select> ' +
'Children <select onclick="childSelected(\'{I}\')" id="children_{I}"><option>1</option><option>2</option><option>3</option><option>4</option></select>' +
'<div id="child_ages_{I}"></div>' + 
'<br />',
TEMPLATE_SYNTAX
)

function childSelected(i) {
var num = $F('children_' + i); // might be wrong
var content = '';
if (num > 0) {
	for (var x = 0; x < num; x++) {
		content += CHILD_AGE_TEMPLATE.evaluate({'I': i, 'N': num});
	}
}
$('child_ages_' + i).innerHTML = 'Ages: ' + content;
}

function createRooms(num) {
var content = '';
if (num > 0) {
	for (var x = 0; x < num; x++) {
		content += ROOM_ROW_TEMPLATE.evaluate({'I': x});
	}
}
ROOM_ROWS_CONTAINER.innerHTML = content;
}

Event.observe(window, 'load', function() {

ROOM_ROWS_CONTAINER = $('room_rows_container');
NUMBER_OF_ROOMS = $('number_of_rooms');

NUMBER_OF_ROOMS.onclick = function() {
	createRooms(NUMBER_OF_ROOMS.value); // might be wrong
}

});

 

Here is my html code

<select id="number_of_rooms" name="number_of_rooms"><option>1</option><option>2</option></select>
<div id="room_rows_container"></div>
<input type="submit" />
[code]