title: Facing with global variable in JavaScript
body: <p>I have faced the variable problem in JavaScript. I declared <code>var checkable = [];</code> to be global.<code>checkable</code> will be contained the elements after this function <code>function success(position)</code>. At the last line, I called <code>document.write(checkable[0]);</code> to be printed in HTML, but it turned out that <code>checkable</code> is undefined. I don't understand why this variable has no any elements even if I did <code>checkable.push(checkpoint[i]);</code>. Please, help me to figure it out.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  var x = document.getElementById("test_radar");
  var checkpoint = ["ICT","OP","SH","EG","Library"];
  var latitude = [13.794411,13.794391,13.792634,13.795725,13.794443];
  var longitude = [100.324581,100.325594,100.324870,100.325874,100.324168];
  var checkable = [];
  var myla;
  var mylo;
  
  function success(position) {
  
   myla = position.coords.latitude+0;
   mylo = position.coords.longitude+0;
  
  
   var s = document.querySelector('#status');
  
   if (s.className == 'success') {   
    return;
   }
  
   s.innerHTML = " Found you!";
   s.className = 'success';
  
   var mapcanvas = document.createElement('div');
   mapcanvas.id = 'mapcanvas';
   mapcanvas.style.height = '0px';
   mapcanvas.style.width = '0px';
  
   document.querySelector('article').appendChild(mapcanvas);
  
   var latlng = new google.maps.LatLng(myla, mylo);
   var myOptions = {
    zoom: 18,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  
   var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
   });
  
   //----------------------------------------------------------------------------------------------------------------------//
   var check = 0, ncheck = 0;
   var r = 0.0006;
   var search = 0.003;
   var i = 0;
   
   var near = [];
  
   x.innerHTML = "My Latitude: " + myla + "&lt;br&gt;My Longitude: \t" + mylo + "&lt;br&gt;&lt;br&gt;Chackinable CheckPoint: ";
   for(i=0;i&lt;latitude.length;i++) {
    if(latitude[i]&lt;(myla+search) &amp;&amp; (myla-search)&lt;latitude[i] &amp;&amp; 
       longitude[i]&lt;(mylo+search) &amp;&amp; (mylo-search)&lt;longitude[i]){
     if(latitude[i]&lt;(myla+r) &amp;&amp; (myla-r)&lt;latitude[i] &amp;&amp; 
        longitude[i]&lt;(mylo+r) &amp;&amp; (mylo-r)&lt;longitude[i]){
      checkable.push(checkpoint[i]);
      //x.innerHTML = "Hi";
      check++;
     }
     else{
      near.push(checkpoint[i]);
      //x.innerHTML = "Hi2";
      ncheck++;
     }
  
    }
   }
   
   
   
   if(check==0){
    x.innerHTML += "No CheckPoint avilable.&lt;br&gt;";
   }
   else {
    x.innerHTML += checkable + "&lt;br&gt;Near Checkpoint: ";
    
    if(ncheck==0){
     x.innerHTML += "No near CheckPoint avilable.&lt;br&gt;";
    }
    else {
     x.innerHTML += near + "&lt;br&gt;";
    }
   }
  
   var d = new Date();
   
   x.innerHTML += "&lt;br&gt;Date&amp;Time of the lastest Scan: " + d.toLocaleDateString() + " | "  + d.toLocaleTimeString();
   setInterval(myTimer, 1000);
   
  }
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success);
  } else {
    error('not supported');
  }
  
  function myTimer() {
   var d = new Date();
   document.getElementById("test_clock").innerHTML = "Time: " + d.toLocaleDateString() + " | " + d.toLocaleTimeString();
  }
  
  document.write(checkable[0]);
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>