我正在构建一个小型Web应用程序,该应用程序将使用表单输入(名称)+用户的地理位置,并将其放入localstorage数组中。我是JS的新手,但是我已经掌握了完整的名称。我现在正尝试将其扩展到在用户按下Submit时纬度+经度存储在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中的“但是到达这里了”。
我想你的问题是这个
我有一个ID为saveData的按钮
您也有一个具有该名称的函数
function saveData(data){ ....
如果该函数位于全局范围内,则将其设置为window.saveData
,然后当具有该ID的元素位于该函数之后时,浏览器将这些元素作为ID存储在window
对象上,因此它将window.saveData
作为元素存储并覆盖该函数。
解决方案是更改函数名称或元素ID。
编辑:
这里还有一些问题:
您没有在position
任何地方声明,而是将其data
作为回调的参数
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句