Learning DOM. Not sure why my function works in the HTML file but not in JS file : I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated. 
Here is my HTML code with the function commented out......

    <!DOCTYPE html>
    <html>

    <head>
	<title>DOM TREE 2</title>
	<link rel="stylesheet" href="css/Content.css">
	<script type="text/javascript" src="JS/js01.js"></script> 
    </head>

    <body style="background-color:lightgray" id="bd">
	<div id="third">
		<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
    </h1>
		<form id="DOMForm">
		
		<textarea id="myTextarea" rows="4" cols="50"></textarea>

		<p><button type="button" onclick="AddFunction()">Add Content</button>
		<button type="button" onclick="Change()">Change Style</button>
		<button type="button" onclick="Clear()">Clear Content</button>
		</p>

		<p id="demo"></p>

    <!--<script>
    function AddFunction() {
        var x = document.getElementById("myTextarea").value;
        document.getElementById("demo").innerHTML = x;
    }
    </script> -->

    </body>
    </html>

 
Here is the JS file with the function.....

    function AddFunction() 
    {
        var x = document.getElementById("myTextarea").value;
        document.getElementById("demo").innerHTML = x;
    }
    function changestyle() 
    {
  
    }
  
    function clear() 
    {
    	document.getElementById("DomForm").reset(); 
    }