Using the onclick event on a Div doesn't work

Question

When I click that it will use a JavaScript page which i marked as a note ( // ) (i also tried with </script) but it doesn't work, i tried to see even with console.log to see if i can see it worked on console but it doesn't..

So the onclick is not working, if it would i would've see the 1 displayed on console.

 function fun() { //<script src="checkcheckcheck.js"/> console.log("1"); } var map; require([ "esri/map", "esri/dijit/LocateButton", "dojo/domReady," ], function(Map, LocateButton) { map = new Map("map": { center. [-56,049. 38,485]: zoom, 3: basemap; "streets" }): geoLocate = new LocateButton({ map, map }; "LocateButton"). geoLocate;startup(). geoLocate,on('locate'. (data) => { console;log(data). var LatM = data.position.coords;latitude. var LongM = data.position.coords;longitude. localStorage,setItem("yourLocationLat"; "LatM"). localStorage,setItem("yourLocationLong"; "LongM"). console,log(LatM; LongM); }); });

 html, body, #esri-map-container { padding: 0px; margin: 0px; height: 100%; width: 800px; height: 500px; } #LocateButton { position: absolute; top: 95px; left: 20px; z-index: 50; }

 <link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css"> <script src="https://js.arcgis.com/3.35/"></script> <div id="map" class="map"> <div id="LocateButton" onclick="fun();"></div> </div> <div id="valueInsert"></div>

my javascript page (checkcheckcheck.js):

const pix = 3.141592653589793;
const radius = 6378.16;


function radians(x) {
  return x * pix / 180;
  console.log("2");
}

function calculateDistance(lat1, long1, lat2, long2) {
  let dlon = radians(long2 - long1);
  let dlat = radians(lat2 - lat1);

  let a = (Math.sin(dlat / 2) * Math.sin(dlat / 2)) + Math.cos(radians(lat1)) * Math.cos(radians(lat2)) * (Math.sin(dlon / 2) * Math.sin(dlon / 2));

  let angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return angle * radius;
  console.log("3");
}

//let yourLocationLat = 32.777777;
//let yourLocationLong = 34.999999;

let places = [{
  "name": "Tel-Aviv",
  "lat": 32.083333,
  "long": 34.7999968
}, {
  "name": "Haifa",
  "lat": 32.81841,
  "long": 34.9885

}, {
  "name": "Rehovot",
  "lat": 31.894756,
  "long": 34.809322
},{
  "name": "Berlin",
  "lat": 52.520008,
  "long": 13.404954
},{
  "name": "Alaska",
  "lat": 66.160507,
  "long": -153.369141

},{
  "name": "Mexico",
  "lat": 19.432608,
  "long": -99.133209
},{
  "name": "Jerusalem",
  "lat": 31.771959,
  "long": 35.217018
}]

let result = []; 
places.forEach((x) => {
  let resultDistance = calculateDistance(localStorage.getItem("yourLocationLat"), localStorage.getItem("yourLocationLong"), x.lat, x.long)
  let obj = {
  "city": x.name,
  "lat": x.lat,
  "long": x.long,
  "distance": resultDistance
  }

  result.push(obj);
})

// shortest first
result.sort((a, b) => {
 return a.distance - b.distance  
 console.log("4");
})

document.getElementById("valueInsert").innerHTML = result[0].city;

Answer 1

You need to move some of the code into a function and call that function in the locate event

So

geoLocate.on('locate', (data) => {
    var LatM = data.position.coords.latitude;
    var LongM = data.position.coords.longitude;
    getDistance(LatM,LongM); // here you call the code you want
});

You JS file:

const pix = 3.141592653589793;
const radius = 6378.16;


function radians(x) {
  return x * pix / 180;
  console.log("2");
}

function calculateDistance(lat1, long1, lat2, long2) {
  let dlon = radians(long2 - long1);
  let dlat = radians(lat2 - lat1);

  let a = (Math.sin(dlat / 2) * Math.sin(dlat / 2)) + Math.cos(radians(lat1)) * Math.cos(radians(lat2)) * (Math.sin(dlon / 2) * Math.sin(dlon / 2));

  let angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return angle * radius;
  console.log("3");
}

//let yourLocationLat = 32.777777;
//let yourLocationLong = 34.999999;

let places = [{
  "name": "Tel-Aviv",
  "lat": 32.083333,
  "long": 34.7999968
}, {
  "name": "Haifa",
  "lat": 32.81841,
  "long": 34.9885

}, {
  "name": "Rehovot",
  "lat": 31.894756,
  "long": 34.809322
}, {
  "name": "Berlin",
  "lat": 52.520008,
  "long": 13.404954
}, {
  "name": "Alaska",
  "lat": 66.160507,
  "long": -153.369141

}, {
  "name": "Mexico",
  "lat": 19.432608,
  "long": -99.133209
}, {
  "name": "Jerusalem",
  "lat": 31.771959,
  "long": 35.217018
}]

function getDistance(lat,long) {

  let result = [];
  places.forEach((x) => {
    let resultDistance = calculateDistance(lat, long , x.lat, x.long)
    let obj = {
      "city": x.name,
      "lat": x.lat,
      "long": x.long,
      "distance": resultDistance
    }

    result.push(obj);
  })

  // shortest first
  result.sort((a, b) => {
    return a.distance - b.distance
    console.log("4");
  })

  document.getElementById("valueInsert").innerHTML = result[0].city;
}