new to html5/javascript - can't make JS code work from separate file

**rippon** · 10-08-2012 08:11 AM

This works:

Code:

<head>
	<title>Look What I Drew</title>
	<meta charset=UTF-8">
	<style>
		canvas { border: 1px solid black;}
	</style>
	<script type="text\javascript" src="myJS.js"></script>
	<script>
		window.onload = myFirstFunction()
		{
			var canvas = document.getElementById("tshirtCanvas");
			var context = canvas.getContext("2d");
			context.fillRect(10, 10, 100, 100);
			context.beginPath();
			context.moveTo(100, 150);
			context.lineTo(250, 75);
			context.lineTo(125, 30);
			context.closePath();
			context.lineWidth = 5;
			context.stroke();
			context.fillStyle = "red";
			context.fill();
		}
	</script>
</head>

But this doesn't:

Code:

<head>
	<title>Look What I Drew</title>
	<meta charset=UTF-8">
	<style>
		canvas { border: 1px solid black;}
	</style>
	<script type="text\javascript" src="myJS.js"></script>
	<script>
		window.onload = myFirstFunction();
	</script>
</head>

where the file, myJS.js, contains this:

Code:

function myFirstFunction()
		{
			var canvas = document.getElementById("tshirtCanvas");
			var context = canvas.getContext("2d");
			context.fillRect(10, 10, 100, 100);
			context.beginPath();
			context.moveTo(100, 150);
			context.lineTo(250, 75);
			context.lineTo(125, 30);
			context.closePath();
			context.lineWidth = 5;
			context.stroke();
			context.fillStyle = "red";
			context.fill();
		}

Please help - because I obviously want to separate my javascript from my html.

**Vince616** · 10-08-2012 10:07 AM

Try this

Code:

  onload=function(){myFirstFunction();}

**xelawho** · 10-08-2012 11:45 AM

or simply

Code:

window.onload = myFirstFunction;

**rippon** · 10-08-2012 05:15 PM

Thanks, Vince616. Doesn't work for me, though. Does it work for you? (Maybe I'm not implementing your suggestion correctly.)

**rippon** · 10-08-2012 05:16 PM

Thanks, xelawho. Doesn't work for me, though. Does it work for you? (Maybe I'm not implementing your suggestion correctly.)

**Vince616** · 10-08-2012 05:31 PM

Hi bud

both versions work for me, can you show us all your code?

I just noticed you have a typo

working version

Code:

  <html>
    <head>
	<meta charset=UTF-8">
	<style type="text/css">
		canvas { border: 1px solid black;}
	</style>
      <script type="text/javascript" src="myJS.js"></script>
      <script type="text/javascript">

         onload=function(){myFirstFunction()}

      </script>
    </head>
    <body>
      <canvas id="tshirtCanvas"></canvas>
    </body>
  </html>

you had

Code:

     <script type="text\javascript" src="myJS.js"></script>

and should be

Code:

     <script type="text/javascript" src="myJS.js"></script>

**rippon** · 10-08-2012 05:51 PM

BINGO!! Thank you!
Every version works now. (I can be very thick sometimes.)

**Vince616** · 10-08-2012 06:01 PM

No problem bud

it is an easy mistake to make

V

**rippon** · 10-08-2012 07:26 PM

Actually, it seems pretty awful that this bug had to be hunted down like this (and, indeed, I may never have found it without your help).
I have a bit of experience writing Java with NetBeans, which would have alerted me to such a syntax error.
So I have looked a bit into development tools. Is 'Aptana' the way to go? Would it automatically find bugs like this?

**Vince616** · 10-08-2012 08:58 PM

I don’t know bud, I only use notepad for this kind of stuff, any debugging that is needed the dev tools in the browsers normally pick up on them. Personally I have made daft mistakes like that many many times but you do tend to learn from them, and rarely repeat them, my advice would be to stick with it and make the mistakes you will learn more.

V

**rippon** · 10-09-2012 03:34 AM

good advice; thanks.

Thread: new to html5/javascript - can't make JS code work from separate file

Thread Tools

Display

new to html5/javascript - can't make JS code work from separate file

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions