External Javascript file not working

In script tag you must use src attribute first and type as second attribute. Not the way around. Also, always omit spaces before and after equals sign:

<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="main.js" type="text/javascript"></script>
  </head>
  <body onload = "console.log('Page fully loaded');">
    <canvas id="mainCanvas" width = "200" height = "200" onContextMenu="javascript: return false;">Canvas not supported.</canvas>
    
Sample Text
  </body>
</html>

In script tag you must use src attribute first and type as second attribute. Not the way around. Also, always omit spaces before and after equals sign:

<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="main.js" type="text/javascript"></script>
  </head>
  <body onload = "console.log('Page fully loaded');">
    <canvas id="mainCanvas" width = "200" height = "200" onContextMenu="javascript: return false;">Canvas not supported.</canvas>
    
Sample Text
  </body>
</html>

Actually, I don't think that's true. According to the XML spec, attribute ordering doesn't matter: http://www.w3.org/TR/REC-xml/#sec-starttags.

And while putting spaces around the = is bad style, the browser should be able to handle it. (Source: I just tried it in Firefox, Chrome, and Safari, and it works.)

So I think something else is wrong.

I have been experimenting with the element lately, but I can't get any functions inside external Javascript files to work. They'll only work if I put them in my HTML file. My .js file is in the same directory as my .htm file.

index.htm

<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="main.css">
		<!--<script type = "text/javacript" src="http://code.jquery.com/jquery-latest.js"></script>-->
		<script type = "text/javacript" src="main.js"></script>
	</head>
	
	<body onload = "console.log('Page fully loaded');">
		<canvas id="mainCanvas" width = "200" height = "200" onContextMenu="javascript: return false;">Canvas not supported.</canvas>
		
Sample Text
	</body>
</html>

main.js

function main()
{
	var canvas = document.getElementById("mainCanvas");
	var ctx=canvas.getContext("2d");
	ctx.fillStyle="#FF0000";
	ctx.fillRect(0,0,150,75);
	
	console.log("Drew rectangle");
}

When I click the paragraph, Chrome's console gives me the message, "Uncaught ReferenceError: main is not defined." The css file is used perfectly. If I inspect the script element that contains the link to main.js, it'll show the correct path to it in a tooltip. I can't figure out what's going wrong.

Everything looks fine to me. You're running a web server, right? And not just trying to access your page from the file system? Because if you're not running a web server, it won't work.

You have misspelt "Javascript", as "javacript". I don't know if this matters.

Personally I'd try loading the page with the debug console open and watch the requests to your http server. You should see the request for the .js file.

If you get a 404 error or something, then you'll be able to see what the problem is.

I would also recommend that you don't use the old, deprecated "DOM0" "onload" or "onclick", and instead use DOM events. I normally do something like:

window.addEventListener("load", my_main_function);

Somewhere in my main script.

The big advantage is that you can have do this in several different places and have them all happen, but there is only one onload attribute.

Well I have it running with XAMPP and it's still giving me the, "Uncaught ReferenceError: main is not defined" error. All the files are in the XAMPP directory for where you put the stuff you want and I changed my HTML file to

<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" type="text/css" href="http://localhost/main.css">
		<script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script type = "text/javascript" src="http://localhost/main.js"></script>
	</head>
	
	<body onload = "console.log('Page fully loaded');">
		<canvas id="mainCanvas" width = "200" height = "200" onContextMenu="javascript: return false;">Canvas not supported.</canvas>
		
Sample Text
	</body>
</html>

The CSS still works fine and it's still the Javascript that's not working

In script tag you must use src attribute first and type as second attribute. Not the way around. Also, always omit spaces before and after equals sign:

<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="main.js" type="text/javascript"></script>
  </head>
  <body onload = "console.log('Page fully loaded');">
    <canvas id="mainCanvas" width = "200" height = "200" onContextMenu="javascript: return false;">Canvas not supported.</canvas>
    
Sample Text
  </body>
</html>

Actually, I don't think that's true. According to the XML spec, attribute ordering doesn't matter: http://www.w3.org/TR/REC-xml/#sec-starttags.

And while putting spaces around the = is bad style, the browser should be able to handle it. (Source: I just tried it in Firefox, Chrome, and Safari, and it works.)

So I think something else is wrong.

Yep you are right. I think it could be because of misspelled "javaCrypt" in his original code. Also, yes you can actually launch static website right from directory in your hard drive. There might be minor issues like page's icon missing, but they are negligible.

To OP: have you tried launch my code? Because it totally works for me without any servers. If you have a server, check the logs?

Show us the contents of your javascript file, also check your requests with developer tools.

And remove those spaces from your attributes...

Well, I just took the code from the first post and plugged it into two notepad files in a folder on my desktop. It didn't work.

I added the 's' to type="text/javacript", and it worked after that.

I'd say markr hit it on the nose. Good eyes on you, markr.

Yeah I figured it out that it was the typo shortly after my post.