如何使用jQuery将数组元素添加到html

时间:2017-09-12 10:07:05

标签: javascript jquery html arrays

我使用浏览器内置的导航器制作了一个包含两个元素的数组。 gpsLocation[0]是我的自由,gpsLocation 1是我的经度。在我的jQuery代码之前,使用log来检查我的gpsLocation,我确认两个值都存在。然而,当我将数组的第一个元素分配给段落元素的html时,它表示未定义。我甚至检查了它给我的坐标,他们非常准确。我已经找到了答案,并且有一百万个类似措辞的问题,但似乎没有人试图这样做。

这是我的代码:



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>
&#13;
&#13;
&#13;

第二个功能名称似乎是随机的,但天气最终将成为其目的。仍在努力理解jQuery和json。

My console

2 个答案:

答案 0 :(得分:0)

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>

答案 1 :(得分:0)

你没有执行navigator.geolocation.getCurrentPosition(函数(位置)函数,这意味着var gpsLocation保持一个空数组。运行我的编辑并看到“现在在这里”的日志永远不会触发。首先查看该问题。

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>