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

Printable View

10-08-2012, 08:11 AM
rippon

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

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.
10-08-2012, 10:07 AM
Vince616

Try this

Code:

onload=function(){myFirstFunction();}
10-08-2012, 11:45 AM
xelawho

or simply

Code:

window.onload = myFirstFunction;
10-08-2012, 05:15 PM
rippon

Thanks, Vince616. Doesn't work for me, though. Does it work for you? (Maybe I'm not implementing your suggestion correctly.)
10-08-2012, 05:16 PM
rippon

Thanks, xelawho. Doesn't work for me, though. Does it work for you? (Maybe I'm not implementing your suggestion correctly.)
10-08-2012, 05:31 PM
Vince616

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>
10-08-2012, 05:51 PM
rippon

BINGO!! Thank you!
Every version works now. (I can be very thick sometimes.)
10-08-2012, 06:01 PM
Vince616

No problem bud

it is an easy mistake to make

V
10-08-2012, 07:26 PM
rippon

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?
10-08-2012, 08:58 PM
Vince616

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
10-09-2012, 03:34 AM
rippon

good advice; thanks.