Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Works within <script> tag, but not in external JS file

    Hi,

    I have a script that I'm trying to run from a canvas element on my html page. When I place it within a <script> tag in the body of the html page it draws on the canvas just fine. But when I link it to the external script.js file, nothing is drawn. I know that the script.js file is linking correctly, because the prompt comes up in both cases, but no drawing in the latter. I'm thinking that line 2 is not getting the correct element for some reason. Any suggestions?

    var username = prompt("What is your name?");
    var canvas = document.getElementById("a");
    var context = canvas.getContext("2d");

    context.fillStyle = "yellow";
    context.beginPath();
    context.arc(95, 85, 40, 0, 2 * Math.PI);
    context.closePath();
    context.fill();
    context.lineWidth = 2;
    context.stroke();
    context.fillStyle = "black";
    ...(more drawing later)

  • #2
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I fixed it. I had to make the link to the JS file in the body of the html AFTER I create the canvas. I was trying to make the link in the head.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,478
    Thanks
    0
    Thanked 635 Times in 625 Posts
    JavaScript should always be attached just before the </body> tag. There are only a couple of very specific exceptions.

    What's the debugging prompt call there for?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by felgall View Post
    What's the debugging prompt call there for?
    you need to update your browser, that screenshot looks to be out of date...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,478
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by rnd me View Post
    you need to update your browser, that screenshot looks to be out of date...
    No it isn't - that's the way the prompt dialog currently looks in the latest version of Opera.

    In Chrome and Firefox the message next to the checkbox is different - asking if you want to disable all future dialogs (alert/confirm/prompt) instead of disabling JavaScript completely. That makes the different browsers useful for two different types of debugging of scripts that use these debugging calls depending on whether you want the ability to just stop the JavaScript completely (using Opera with such calls to debug why your code is stucjk in an infinite loop) or to debug values in a loop that runs a large but finite number of times (using Chrome or Firefox to view the first so many values and then disable the display of the dialogs for the rest of the iterations of the loop). Which browser you'd choose to use the debugging dialogs with depends on what sort of JavaScript problem you are trying to debug.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by felgall View Post
    No it isn't - that's the way the prompt dialog currently looks in the latest version of Opera.
    first off, why choose the least popular browser to make a point, seems misleading.

    second, and more importantly, as i said, your screenshot is old. i guess you don't actually use opera or you would have noticed by now. Dumb options like killing JavaScript have been removed. I cannot find a single current browser that behaves as you describe.

    while i agree that prompt() is not the best option for gathering input, let's sell our opinion with facts instead of carefully-selected worst-case-scenarios that aren't even valid anymore:



    the "don't ask again" option in chrome is reason enough not to rely on the feature. The poorly-worded "OK/CANCEL" button labels make for less helpful UI than "Save Name / Cancel Name Change" would. Async programming will result in applications that are easier to test, deploy, and maintain. In short, there's plenty of good reasons not to use prompt(), let's not oversell our case with mis-information.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,478
    Thanks
    0
    Thanked 635 Times in 625 Posts
    Quote Originally Posted by rnd me View Post
    fthe "don't ask again" option in chrome is reason enough not to rely on the feature. The poorly-worded "OK/CANCEL" button labels make for less helpful UI than "Save Name / Cancel Name Change" would. Async programming will result in applications that are easier to test, deploy, and maintain. In short, there's plenty of good reasons not to use prompt(), let's not oversell our case with mis-information.
    There has been no reason to use them for anything except debugging since Netscape 4 died. Since the latest version of Firefox now has a debugger built in (the same as all other browsers have for some time now) there is no reason to use them even for debugging. This means that they are effectively obsolete and ought not to be used any more for any purpose (except by newbies to JavaScript who are copying (or being taught how to) code for Netscape 4 and earlier browsers).


    I use Opera all the time and have the updates turned on. My browser assures me that the 12.16 version that I am running (which displays the dialog almost exactly as I have shown) is the latest version.

    Its getting really tempting to install override functions as a userscript into the browser so that so that the browser will ignore such antiquated code. Particularly since their main use seems to be the annoying are you sure you want to leave confirm boxes.
    Last edited by felgall; 09-06-2013 at 10:32 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

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