Jump to content
  • Advertisement
Sign in to follow this  
Dante12129

External Javascript file not working

This topic is 2136 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I have been experimenting with the <canvas> 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>
		<p id = "test" onclick = "main();">Sample Text</p>
	</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.

Share this post


Link to post
Share on other sites
Advertisement

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>
    <p id="test" onClick="main();">Sample Text</p>
  </body>
</html>

 

Share this post


Link to post
Share on other sites

 

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>
    <p id="test" onClick="main();">Sample Text</p>
  </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.

Share this post


Link to post
Share on other sites

I have been experimenting with the <canvas> 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>
		<p id = "test" onclick = "main();">Sample Text</p>
	</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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>
		<p id = "test" onclick = "main();">Sample Text</p>
	</body>
</html>

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

Edited by Dante12129

Share this post


Link to post
Share on other sites

 

 

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>
    <p id="test" onClick="main();">Sample Text</p>
  </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?

Share this post


Link to post
Share on other sites

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

And remove those spaces from your attributes...

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!