Hello guys.I just started to learn website building using HTML5 and Javascript.I am currently reading the Head First HTML5 programming.I was practicing canvas and am having some trouble with my code.

Basically i just want to show different shapes like square,circle or triangle in a canvas depending on what the user selects in the dropdown.The HTML code is :

HTML Code:
<! doctype html>
<html>
<head>
	<title>Practice Canvas</title>
	<style>
	canvas{
	border : 1px solid black;
	}
	</style>
	<script src="practice.js"></script>
</head>
<body>
<canvas id="drawingBoard" width="600" height="200" ></canvas>
<p>
	<label for="shape">Select shape : </label>
	<select id="shape" >
		<option value="square">Square</option>
		<option value="circle">Circle</option>
		<option value="triangle">Triangle</option>
	</select>
	<br>
	<p>
	<input type="button" value="GO" id="goButton" ></input>
	</p>
</p>
</body>
</html>
Now here is the problem with the JS code.When i just wrote

Code:
window.onload = function(){
alert("Hello");
	var goButton = document.getElementByID("goButton");
	goButton.onclick = showDrawing;	
}
it works fine and i get the alert box saying hello.But when i add the showDrawing function i dont even get any alert box.Here is the new JS code:

Code:
window.onload = function(){
alert("Hello");
	var goButton = document.getElementByID("goButton");
	goButton.onclick = showDrawing;	
}

function showDrawing(){
	alert("Hello");
	var canvas = document.getElementById("drawingBoard");
	var context = canvas.getContext("2d");
	
	var selectObj = document.geElementById("shape");
	var index = selectObj.selectedIndex;
	var shapeSelected = selectObj[index].value;
	
	if(shapeSelected == "square"{
		drawSquare(canvas,context);
	}
}
So why am i not getting any alerts after i added the showDrawing function.

Thanks in advance.

PS:Its my first post here.I read the rules before posting but i am really sorry if i overlooked some rule.