SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    global variable is undefined in function

    Please see the code below.
    Why is y passed on to the showPositionfunction while x appears as null ?

    I am using the w3schools script like here: http://www.w3schools.com/html/tryit....l5_geolocation

    but instead of placing <script> after the html element I include them in the head.

    The weird thing is that if I insert variable x as a local variable in the showPosition function the script works.
    That is how I ruled out the possible issue of page not having loaded before changing x's[ B]innerHTML[/B]

    Code JavaScript:
    <head>
    <script>
    var x=document.getElementById("demo");
    var y="test";
    var r=x.className;
     
    function getLocation()
      {
      if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";}
      }
     
    function showPosition(position)
      {
      alert (y + r);
      x.innerHTML="Latitude: " + position.coords.latitude + 
      "<br>Longitude: " + position.coords.longitude;	
      }
     
     
    </script>
    </head>
    <body>
     
    <p id="demo" class="first">Click the button to get your coordinates:</p>
    <button onclick="getLocation()">Try It</button>
     
    </body

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    It's because it's running before the dom is built, so there's no element of id="demo".

    What you could do is just declare x as the global (i.e. var x; ), then add the variable assignment (x = document.getElementById("demo")) into the getLocation method.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I would add that global variables are seldom required and that undefined is the default initial value for a variable.

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,395
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    You should place your JS just before the closing </body> tag, to ensure that the rest of the page is loaded before the script runs.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by fretburner View Post
    You should place your JS just before the closing </body> tag, to ensure that the rest of the page is loaded before the script runs.
    and wrap it inside an anonymous function so that none of the variables are global.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


Tags for this Thread

Bookmarks

Posting Permissions

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