javascript - 如何将 javascript 函数发布到 html 输入字段中

Question

我需要在输入表单中包含经度和纬度，但我不知道该怎么做，我已经尝试了几个示例，如下面的代码所示(不起作用)。

<script>
function data(){

var x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
  }
}

function showPosition(position) {
  x.innerHTML = 
  "Latitude: " + position.coords.latitude + 
   "<br>Longitude: " + position.coords.longitude;
}
}</script>

<form name="test_form">
  <input id="demo" type="text" value=""> 
</form>
<button onclick="getLocation();">GO</button>

预期结果:经度和纬度在输入框内，或者如果可能，经度在一个输入框内，纬度在另一个输入框内

Answer 1

您需要设置输入的值而不是覆盖其 HTML。

喜欢

//设置输入的值
x.value = "纬度:"+ position.coords.latitude + ...


已更新以包含单独的纬度/经度框

看下面的演示

function showPosition(position) {
  console.log('location obtained');
  console.log(position);

  var lon = document.getElementById("lon");
  var lat = document.getElementById("lat");

  // set the value of the inputs
  lon.value = position.coords.longitude;
  lat.value = position.coords.latitude;
}

function getLocation() {
  console.log('button clicked');

  if (navigator.geolocation) {
    console.log('getting location');
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}

label {
  width: 100px;
  font-weight: bolder;
  display: inline-block;
}

<label>Longitud:</label><input id="lon" type="text" value=""> <br/>
<label>Latitude:</label><input id="lat" type="text" value=""> <br/>
<button onclick="getLocation();">GO</button>