www.webdeveloper.com
Results 1 to 11 of 11

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

  1. #1
    Join Date
    Oct 2012
    Posts
    11

    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.

  2. #2
    Join Date
    Jan 2010
    Posts
    79
    Try this

    Code:
      onload=function(){myFirstFunction();}

  3. #3
    Join Date
    Nov 2010
    Posts
    1,086
    or simply
    Code:
    window.onload = myFirstFunction;

  4. #4
    Join Date
    Oct 2012
    Posts
    11
    Thanks, Vince616. Doesn't work for me, though. Does it work for you? (Maybe I'm not implementing your suggestion correctly.)

  5. #5
    Join Date
    Oct 2012
    Posts
    11
    Thanks, xelawho. Doesn't work for me, though. Does it work for you? (Maybe I'm not implementing your suggestion correctly.)

  6. #6
    Join Date
    Jan 2010
    Posts
    79
    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>
    Last edited by Vince616; 10-08-2012 at 05:42 PM. Reason: Noticed typo

  7. #7
    Join Date
    Oct 2012
    Posts
    11
    BINGO!! Thank you!
    Every version works now. (I can be very thick sometimes.)

  8. #8
    Join Date
    Jan 2010
    Posts
    79
    No problem bud

    it is an easy mistake to make

    V

  9. #9
    Join Date
    Oct 2012
    Posts
    11
    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. #10
    Join Date
    Jan 2010
    Posts
    79
    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

  11. #11
    Join Date
    Oct 2012
    Posts
    11
    good advice; thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles