javascript - 试图获取地理位置， "Uncaught TypeError: Cannot set property ' 值为空”？

Question

var lat = document.querySelector("#lat");
var long = document.querySelector("#long")
var latLong = document.getElementById("latLong");

if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(myPosition)
}
else {
  latLong.innerHTML = "sorry, position not avaliable"
}

function myPosition (position){
  lat.value  =  position.coords.latitude;
  long.value = position.coords.longitude;
}

不太确定这里发生了什么/为什么会给我这个错误。如果我将 myPosition 更改为

function myPosition (position){
      latLong.innerHTML =  "Latitude: " + position.coords.latitude  + 
      "Longitude: " + position.coords.longitude;
    }

它工作得很好，没有错误。但我希望我的纬度和经度分别在单独的变量中

我是不是漏掉了什么？我不明白为什么这不起作用。我试过 lat.textContent/long.textContent、lat.innerHTML/long.innerHTML，但似乎对每个坐标都不起作用

HTML:

<h2> Your location is... </h2>

<div id="latLong"></div>

<div id="lag">Latitude: </div>
<div id="long">Longitude: </div>

Answer 1

您在 HTML 中输入了错误的元素 ID。

<div id="lag">Latitude: </div>

应该是

<div id="lat">Latitude: </div>

如果你想用#lat选择它。那么分配给单独元素的 myPosition 就不会出错。

但是，您应该只在分配输入值 时使用.value，例如输入字段和文本区域。否则，如果您想设置 div 或其他元素的文本内容，请使用 .textContent:

function myPosition (position){
  lat.textContent  = position.coords.latitude;
  long.textContent = position.coords.longitude;
}