如何使用jQuery向HTML添加数组元素

Question

I made an array with two elements using the browser's built in navigator. gpsLocation[0] is my latitude, and gpsLocation 1 is my longitude. Immediately before my jQuery code, using log to check my gpsLocation, I confirm that both values exist. Yet, when I assign the first element of my array to the html of a paragraph element, it says undefined. I even checked the coords it gave me and they're shockingly accurate. I've searched for an answer and there's a million similarly phrased questions but none of them seem to be trying to do this.

Here is my code:

 function getLocation() { var gpsLocation = []; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { gpsLocation.push(position.coords.latitude); gpsLocation.push(position.coords.longitude); }); } return gpsLocation; } function getWeather() { var gpsLocation = getLocation(); console.log(gpsLocation);//Looks good in the console. $(function(){ $('#test-paragraph').html('Latitude: ' + gpsLocation[0]); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="weather"> <button id="test-button" onclick="getWeather()">Test Button</button> <p id="test-paragraph">This is a sample paragraph for learning jQuery</p> </div> 

The second function name might seem random but weather is ultimately going to be its purpose. Still struggling to understand jQuery and json.

My console

Answer 1

 function getLocation() { var gpsLocation = []; if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { latitude: "a", longitude: "v" }; gpsLocation.push(pos); }); } return gpsLocation; } function getWeather() { var gpsLocation = getLocation(); console.log(gpsLocation); //Looks good in the console. $(function() { $('#test-paragraph').html('Latitude: ' + gpsLocation[0]); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="weather"> <button id="test-button" onclick="getWeather()">Test Button</button> <p id="test-paragraph">This is a sample paragraph for learning jQuery</p> </div> 

Answer 2

you arent executing the navigator.geolocation.getCurrentPosition(function(position) function, which means that var gpsLocation stays an empty array. Run my edit and see the log 'now in here' never fires. Look into that issue first.

 function getLocation() { var gpsLocation = []; if (navigator.geolocation) { console.log('in here'); navigator.geolocation.getCurrentPosition(function(position) { console.log('now in here'); var pos = [{ latitude: "a", longitude: "v" }]; gpsLocation.push(pos); console.log('do i get this far?'); }); } return gpsLocation; } function getWeather() { var gpsLocation = getLocation(); console.log(gpsLocation); //Looks good in the console. $(function() { $('#test-paragraph').html('Latitude: ' + gpsLocation[0]); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="weather"> <button id="test-button" onclick="getWeather()">Test Button</button> <p id="test-paragraph">This is a sample paragraph for learning jQuery</p> </div>