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 13 of 13
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post

    External js file

    I haven't been able to get my external js file to work. Could someone please direct me in the right direction. I just want to be able to load a basic map via a js file. They are both in the same directory.

    Code:
    <html>
    <head>
    </head>
    <style type="text/css">
    div#map_container{
    	width:100%;
    	height:350px;
    }
    </style>
    
    <body onload =initalize()>
    This is a test
    <script type="text/javascript" scr = "testjs.js"></script>
    </body>
    <html>
    Code:
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    <body onload="initialize();">

    You've misspelled it in the body tag, and your syntax is wrong.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post
    that was certainly a problem but unfortunately that didn't fix it.

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post
    I'm a little confused on how the process works. So on the <script src = "" > we are essentially importing the js file into the html. But I just don't understand how the import works within the html. For example, lets say I make a circle or event inside the js file. Does importing the script automatically import the images associated with the js? Is there any resource that you would recommend for me to understand working with external js?

  • #5
    New Coder
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    8
    Thanked 1 Time in 1 Post
    Btw my new code is this:
    Code:
    <html>
    <head>
    <script type="text/javascript" scr = "testjs.js"></script>
    </head>
    <style type="text/css">
    div#map_container{
    	width:100%;
    	height:350px;
    }
    </style>
    
    <body onload = "initialize();">
    This is a test 123aasdf
    
    </body>
    <html>

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,457
    Thanks
    0
    Thanked 632 Times in 622 Posts
    JavaScript should be attached just before the </body> tag and all the JavaScript should be in that file and not jumbled with the HTML. With the file attached at the bottom the onload is unnecessary.

    Code:
    <html>
    <head>
    </head>
    <style type="text/css">
    div#map_container{
    	width:100%;
    	height:350px;
    }
    </style>
    
    <body>
    This is a test 123aasdf
    
    <script type="text/javascript" scr = "testjs.js"></script>
    </body>
    <html>
    And with the JavaScript you have you already call the initialize onload wiith the following line:

    google.maps.event.addDomListener(window, 'load', initialize);

    so calling it again using the Netscape 4 way is definitely not required.
    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.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Quote Originally Posted by and0rsk View Post
    I'm a little confused on how the process works. So on the <script src = "" > we are essentially importing the js file into the html. But I just don't understand how the import works within the html. For example, lets say I make a circle or event inside the js file. Does importing the script automatically import the images associated with the js? Is there any resource that you would recommend for me to understand working with external js?
    You are already saying it right so you almost have understood the concept. You have to imagine that the external script is imported/included in the HTML document. So all references in the JS file to other external sources assume the HTML file as the root. If you have relative paths (e. g. load an image) in the JS file the path must have the same format as if you were loading images in the HTML file.

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Location
    Copenhagen, Denmark
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Isn't there another misspelling? In this here line,
    Code:
    <script type="text/javascript" scr = "testjs.js"></script>
    scr should probably be src.

  • #9
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Location
    Somewhere on a map
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Well, what about?
    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    </
    head>
    <
    style type="text/css">
    div#map_container{
        
    width:100%;
        
    height:350px;
    }
    </
    style>

    <
    body>
    This is a test 123aasdf

    </body>
    <
    script type="text/javascript" src "testjs.js"></script>
    <script>
    initialize();
    </script>
    <html> 

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    seems like it would work if your html had a div with the id "map_container"

  • #11
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Location
    Somewhere on a map
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by xelawho View Post
    seems like it would work if your html had a div with the id "map_container"
    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    </
    head>
    <
    style type="text/css">
    div#map_container{
        
    width:100%;
        
    height:350px;
    }
    </
    style>

    <
    body>
    <
    div id='map_container'></div>

    </
    body>
    <
    script type="text/javascript" src "testjs.js"></script>
    <script>
    initialize();
    </script>
    </html> 
    I fixed his original he posted, slipped my mind.

  • Users who have thanked 0x3 for this post:

    and0rsk (09-09-2013)

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,457
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Quote Originally Posted by 0x3 View Post
    Well, what about?
    PHP Code:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    </
    head>
    <
    style type="text/css">
    div#map_container{
        
    width:100%;
        
    height:350px;
    }
    </
    style>

    <
    body>
    This is a test 123aasdf

    </body>
    <
    script type="text/javascript" src "testjs.js"></script>
    <script>
    initialize();
    </script>
    <html> 
    That is still attaching the call to initialize twice if you use the code that already attaches it using:

    google.maps.event.addDomListener(window, 'load', initialize);
    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.

  • Users who have thanked felgall for this post:

    and0rsk (09-09-2013)

  • #13
    0x3
    0x3 is offline
    New Coder
    Join Date
    Sep 2013
    Location
    Somewhere on a map
    Posts
    37
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Internet Explorer

    Quote Originally Posted by felgall View Post
    That is still attaching the call to initialize twice if you use the code that already attaches it using:

    google.maps.event.addDomListener(window, 'load', initialize);
    Huh, i seen that call and thought about that, but i figured he was calling it again for another reason, good catch.

  • Users who have thanked 0x3 for this post:

    and0rsk (09-09-2013)


  •  

    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
    •