Question

我正在构建一个小型Web应用程序，它接受表单输入（名称）+用户的地理位置，并将其放入localstorage数组中。我是JS的新手，但我已经掌握了完成名称的部分。我现在正在尝试将其扩展到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中的'但它到达此处'。

Answer 1

我认为你的问题是这个

我有一个id为saveData的按钮

您还有一个具有该名称的功能

function saveData(data){ ....

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

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

修改

以下是一些问题：

你没有在任何地方声明window.saveData，你有position作为回调的参数

data

这没有任何意义，你可能意味着

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

然后有一个事实是你在localStorage中存储位置对象的数字，而不是数组：

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

了解你如何将数据推送到lat，但是你要保存纬度，数字，而不是数组，所以下次你试图推送到数字而不是数组你得到一个错误，应该是

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

但是现在你已经将这些数字存储在localStorage中，所以在你在脚本中走得那么远之前你会得到一个错误，你必须清除你的localStorage，它可以在浏览器控制台或像这样

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

在开始尝试工作代码之前，你必须先清除它，这应该是这样的

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

检查Geolocation后的功能无法启动

1 个答案: