javascript - 对( javascript + html )代码进行少量操作

Question

大家好，希望你们一切都好，

这是我的代码:

var x = document.getElementById('geo_output');
//x.innerHTML = "here is geo_output";   	
function getLocation()
{
  if(navigator.geolocation)
    {
      //x.innerHTML = "Supporting";
      navigator.geolocation.getCurrentPosition(showPosition);
    }
  else
    {
      x.innerHTML = "Browser not Supporting";
    }
}

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

$('#geo_output').click(getLocation)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<h1>trace your location</h1>	
	<button onClick="getLocation()">Get Location</button>	
  <div id="geo_output">
  </div>
  <br>	<br>	<br>	<br>	<br>	
  <div id="form_output">
    <form action="includes/signup.php" method="POST">
    <input type="text" name="lat" placeholder="latitude">
    <br>
    <input type="text" name="lon" placeholder="longitude">
    <br>
    <input type="text" name="id" placeholder="id">
    <br>
    <input type="text" name="name" placeholder="first_name">
    <br>
    <input type="text" name="address" placeholder="address">
    <br>
    <input type="text" name="description" placeholder="description">
    <br>
    <button type="submit" name="submit"> envoyer </button>
  </div>

当我执行它时，它给出了正确的结果。

但我想知道该怎么做，当我点击按钮门位置时，纬度和经度将直接自动插入到它们的<input>中

<input type="text" name="lat" placeholder="latitude">
<br>
<input type="text" name="lon" placeholder="longitude">

谢谢 friend

Answer 1

要选择正确的输入，请为其指定一个ID:

<input id="latitude" type="text" name="lat" placeholder="latitude">
<br>
<input id="longitude" type="text" name="lon" placeholder="longitude">

在showPosition函数中:

document.getElementById('latitude').value = position.coords.latitude;
document.getElementById('longitude').value = position.coords.longitude;