我正在基于一些我想要的Json数据的计算器,当我输入经度和纬度时,我得到了与该经度和纬度相关联的网格代码。问题是当我从输入中获得值时,结果递归为0表示输入值未定义
这就是我的代码的样子
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" id="my-form">
<div class="form-group">
<label for="">Enter Lat</label>
<input type="text" id="lat" step="any">
<label for="">Enter Long</label>
<input type="textr" id="long" step="any">
</div>
<input type="button" id="Btn" value="Calculate" >
<h2 id="result">result</h2>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var desiredLat = document.getElementById("lat").value,
desiredLong = document.getElementById("long").value;
const
myData = {
"datagrid": [
{ "GRIDCODE": 1735,"lat": 35.91511132, "long": -5.401484264 },
{ "GRIDCODE": 1805, "lat": 35.90677815, "long": -5.468149593 },
{ "GRIDCODE": 1808, "lat": 35.90677815, "long":-5.459816427 },
{ "GRIDCODE": 1784, "lat": 35.89844499, "long":-5.476482759 }
]
};
gridcode = lookupGridcodeByLatAndLong(myData.datagrid),
headerHTML = gridcode ;
console.log(headerHTML);
function lookupGridcodeByLatAndLong(sourceArray){
let gridcode = 0;
for (let currentObject of sourceArray){
if (currentObject.lat === desiredLat && currentObject.long === desiredLong){
gridcode = currentObject.GRIDCODE;
}
}
return gridcode;
}
$("#Btn" ).click(function() {
$("#result").html(gridcode);
});
</script>
</body>
</html>
答案 0 :(得分:0)
获得zero
值的原因是因为您在第一次传递lookupGridcodeByLatAndLong
和lat
值时调用了lang
函数,两个值都将返回未定义因为您尚未输入它们。
您必须先用值填充它们,然后单击按钮以获取lat
和lang
值,然后再进行计算以获取GRIDCODE
,实际上您并不需要可以将对象值解析为参数,因为您已将其初始化为全局参数,因此您仍可以在函数内部使用它而无需解析它。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" id="my-form">
<div class="form-group">
<label for="">Enter Lat</label>
<input type="text" id="lat" step="any">
<label for="">Enter Long</label>
<input type="textr" id="long" step="any">
</div>
<input type="button" id="Btn" value="Calculate" >
<h2 id="result">result</h2>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const
myData = {
datagrid: [
{ "GRIDCODE": 1735,"lat": 35.91511132, "long": -5.401484264 },
{ "GRIDCODE": 1805, "lat": 35.90677815, "long": -5.468149593 },
{ "GRIDCODE": 1808, "lat": 35.90677815, "long":-5.459816427 },
{ "GRIDCODE": 1784, "lat": 35.89844499, "long":-5.476482759 }
]
};
function lookupGridcodeByLatAndLong(lat, long){
let gridcode = 0;
var result = myData.datagrid.find(x => x.lat == lat && x.long == long)
if (result) {
gridcode = result.GRIDCODE;
}
return gridcode;
}
$("#Btn" ).click(function() {
var lat = document.getElementById("lat").value,
long = document.getElementById("long").value;
var result = lookupGridcodeByLatAndLong(lat, long)
$("#result").html(result);
});
</script>
</body>
</html>