尝试获取地理位置时，“未捕获的值:无法设置空值的属性‘TypeError’”？

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/ work .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;
}