javascript - 检查地理位置后的功能未启动

Question

我正在构建一个小型网络应用程序，它采用表单输入(名称)+用户的地理位置并将其放入本地存储数组中。我是 JS 新手，但我已经完成了处理名称的部分。我现在尝试将其扩展到用户按下提交时将纬度 + 经度存储在本地存储数组中的位置，但不知何故，执行此操作的函数不会启动/设置。

window.onload = function() {

// Read value from storage, or empty array
var names = JSON.parse(localStorage.getItem('locname') || "[]");
var lat = JSON.parse(localStorage.getItem('latitude') || "[]");
var long = JSON.parse(localStorage.getItem('longitude') || "[]");

function initCoords() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(saveData);
    console.log('This works');
  } else {
    showError("Your browser does not support Geolocation!");
  }
}

function saveData(data){
  console.log('But does it get here?');
  //Push Users Input value
  var data = document.getElementById("locationName").value;
  names.push(data);
  localStorage.setItem('locname', JSON.stringify(names));

  //Push Latitude
  var latitude = position.coords.latitude;
  lat.push(latitude);
  localStorage.setItem('latitude', JSON.stringify(latitude));

  //Push Longitude
  var longitude = position.coords.longitude;
  long.push(longitude);
  localStorage.setItem('longitude', JSON.stringify(longitude));
  }

document.querySelector('#saveData').onclick = initCoords;
} 

我有一个 ID 为 saveData 的按钮。我的这个脚本的早期版本没有地理定位，工作得很好，我通过单击按钮启动了 saveData 函数。在这种情况下，我首先想检查用户是否有可用的地理位置，因此我创建了 initCoords 函数。

我尝试使用控制台日志来查看我的函数在哪里结束，但不知何故它没有到达 saveData 中的“但是它到达这里了吗”。

Answer 1

我认为你的问题是这样的

I have a button with the id saveData

您还有一个具有该名称的函数

function saveData(data){ ....

如果函数在全局范围内，它将被设置为window.saveData，然后当具有该ID的元素出现在该函数之后时，浏览器将元素作为ID存储在window 对象，因此它将 window.saveData 存储为元素并覆盖该函数。

解决方案是更改函数名称或元素 ID。

编辑:

还有一些问题:

您没有在任何地方声明位置，您有数据作为回调的参数

function saveData(data){
  var data = document.getElementById("locationName").value;
  ....

这没有任何意义，你可能是说

function saveData(position){
  var data = document.getElementById("locationName").value;
  ....

事实上，您将位置对象中的数字存储在 localStorage 中，而不是数组:

var latitude = position.coords.latitude;
  lat.push(latitude);
  localStorage.setItem('latitude', JSON.stringify(latitude));

看看你如何将数据推送到纬度，但是你保存的是纬度，数字，而不是数组，所以下次你尝试推送到数字而不是数组时，你会得到一个错误，应该是

var latitude = position.coords.latitude;
  lat.push(latitude);
  localStorage.setItem('latitude', JSON.stringify(lat));

但是现在您已经将数字存储在 localStorage 中，因此在脚本中执行到此之前您会收到错误，您还必须清除 localStorage，这可以在浏览器控制台等中完成这个

localStorage.removeItem('locname');
localStorage.removeItem('latitude');
localStorage.removeItem('longitude');

在开始尝试工作代码之前，您必须清除它一次，它应该如下所示

window.onload = function () {

    localStorage.removeItem('locname');
    localStorage.removeItem('latitude');
    localStorage.removeItem('longitude');

    // Read value from storage, or empty array
    var names = JSON.parse(localStorage.getItem('locname') || "[]");
    var lat   = JSON.parse(localStorage.getItem('latitude') || "[]");
    var long  = JSON.parse(localStorage.getItem('longitude') || "[]");

    function initCoords() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(saveData);
            console.log('This works');
        } else {
            showError("Your browser does not support Geolocation!");
        }
    }

    function saveData(position) {
        var data = document.getElementById("locationName").value;
        names.push(data);
        localStorage.setItem('locname', JSON.stringify(names));

        var latitude = position.coords.latitude;
        lat.push(latitude);
        localStorage.setItem('latitude', JSON.stringify(lat));

        var longitude = position.coords.longitude;
        long.push(longitude);
        localStorage.setItem('longitude', JSON.stringify(long));

    }

    document.getElementById('saveData').onclick = initCoords;
}