Javascript 检查地理位置后的函数不'；开始

我正在构建一个小型web应用程序，它采用表单输入（名称）+用户的地理位置，并将其放入本地存储阵列中。我是JS新手，但我已经完成了负责名称的部分。我现在尝试将其扩展到当用户按submit时，Latitude+Longitude存储在localstorage阵列中，但不知何故，执行此操作的函数无法启动/设置

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中的“butdoitgethere”

我想你的问题是

我有一个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));

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

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;
}

---

它以前使用id saveData和名为saveData的函数。但为了确保我将函数更改为postData，问题仍然存在。@user3708455-在我看来，您有未定义的变量，

position

defined在哪里？我不确定是否需要定义它，因为我在网上找到了一个简单的示例，他们没有定义它。没有其他代码的地理定位代码（有点不同）也运行良好。我似乎无法找到它为什么不能启动saveData。@TDMW-有多个问题，我测试了它并修复了我能找到的任何问题，请看上面的答案。你的答案很有道理，我现在肯定看到我做错了一些事。但是完整的代码仍然无法正常工作。我在saveData函数中尝试了控制台日志记录，但什么都没有出现。它似乎仍然没有达到代码的这一部分。