JavaScript not working in Form

I have a button inside of a form. The button's onclick even points to a Javascript function, however I'm getting some strange results. Note that I am not a very experienced Javascript developer.

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script type="text/javascript">

		function addFile()

		{

			var newFile = document.createElement("input")

			newFile.setAttribute("name", "userfile[]")

			newFile.setAttribute("type", "file")

			

			var newBreak = document.createElement("br")

			

			document.getElementById("filelist").appendChild(newFile)

			document.getElementById("filelist").appendChild(newBreak)

		}

	</script>

</head>

<body>

	<form action="" method="post" enctype="multipart/form-data">

		<div class="block">

			<div class="blockheader">Share these files...</div>

			<div class="blockbody">

				<div id="filelist">

					<input name="userfile[]" type="file" /><br />

				</div>

                                <hr /><input name="addFile" type="button" value="Add File" onclick="addFile()" />

			</div>

			<div class="blockfooter">

				<input type="submit" value="Send files" />

			</div>

		</div>

	</form>

</body>

</html>

The above code does not work. The error is that the function addFile() does not exist. Now when I move the button outside of the form it works. As in the following code.

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<script type="text/javascript">

		function addFile()

		{

			var newFile = document.createElement("input")

			newFile.setAttribute("name", "userfile[]")

			newFile.setAttribute("type", "file")

			

			var newBreak = document.createElement("br")

			

			document.getElementById("filelist").appendChild(newFile)

			document.getElementById("filelist").appendChild(newBreak)

		}

	</script>

</head>

<body>

        <input name="addFile" type="button" value="Add File" onclick="addFile()" />

	<form action="" method="post" enctype="multipart/form-data">

		<div class="block">

			<div class="blockheader">Share these files...</div>

			<div class="blockbody">

				<div id="filelist">

					<input name="userfile[]" type="file" /><br />

				</div>

			</div>

			<div class="blockfooter">

				<input type="submit" value="Send files" />

			</div>

		</div>

	</form>

</body>

</html>

The above code works perfectly. Could anyone explain why this is, and hopefully a way to fix it.

Thanks for reading.