Calculate distance, works in Codepen, not in project

#1

Hi, I have a working Codepen here which simply calculates distance between two GPS coordinates (thanks to the author!).

However, when I copy paste the code in one of my html template (I haven’t externalized the script in a stand alone js doc yet), code does not work anymore … Anyone has an idea ? Thanks.

 <ion-view >	
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
  </ion-nav-buttons>
	<ion-nav-title>
	  <img class="navigation_bar_logo"src="img/WM_name_transparent_color.png">
	</ion-nav-title>	 
  <ion-content class="background_lightgray"  overflow-scroll="true" ng-controller="loadingCtrl">

  <span >The distance btw here and house is <span id="dist"></span> which is awesome </span>

  
<ion-list>
  <ion-item  ng-controller="loadingCtrl" bindonce  ng-repeat= "restaurant in restaurantList " href="#">
  
	<article class="item_frame">
	    <div class="marker_left_container">
			<img  class="venue_rest_marker" ng-src="{{restaurant.icon}}">	
            <span class="venu_type_text">{{restaurant.venueType}}</span>
            <span class="distance_from_user_rest">0.7 km</span>
            <span class="distance_from_user_rest2">from current location</span>
	    </div>
        <div class="restaurant_details_container">
            <h1 class="restaurant_name_inlist">{{restaurant.Name}}</h1>
            <span class="restaurant_detail_inlist2">{{restaurant.subCuisine}}<br> {{restaurant.subsubCuisine}}</span>
            <span class="restaurant_address">{{restaurant.address}}, <br> </span>
            <span class="restaurant_address">{{restaurant.cp}}, {{restaurant.city}} <br><br></span>
            <span class="restaurant_others">{{restaurant.phoneNumber}}<br> </span>
            <span class="restaurant_others">{{restaurant.website}}<br> <br></span>
                          
                           
		</div>
	</article><!--main article frame 1 -->	

  </ion-item>
</ion-list>

	<div id="empty_state">
		
		<P class="endoffeed_msg">Looks like you've reach end of this feed, and there is nothing left to see here</P>
		<img ng-src="img/WM_logo_grey_v6.png">
	</div>
#2

I have never used this library. I would suggest to outsource to a JS file and debug.

#3

debugger says " Uncaught TypeError: Cannot set property 'innerHTML' of null " but …i quite don’t understand as I do have a id in my file :

<span >the distance btw  and house is <span id="dist"></span> which is awesome </span>
      <p id="dist2"></p>
#4

Please, provide more code about this error. How you’re selecting dist2? Probably the selector is undefined.

#5

sorry the “dist2” was just a trial, actually code is 100% similar to Codepen

#6

It’s not working because the selector is selecting before the DOM is ready. For an example, you can try this:

window.onload = function(){
  document.getElementById("dist").innerHTML =  Math.round((
  GreatCircle.distance(48.853139,2.368999, 48.826136, 2.321793) * 10 ) /
  10 );
}
#7

thanks raphael, works now on firefox, but fails in Chrome, and on Android… investigating !

#8

If the code is exactly the same, should work on chrome, because I’ve tested on it. Watch out with more than one window.onload in your code.

#9

This is strange … no other window.onload() in the code…

#10

found solution, working plunker here.