将 javascript 变量存储到 HTML 文本框中

Question

我正在使用 HTML5 地理定位并希望将纬度和经度存储到两个单独的文本框中，而不是简单地显示在屏幕上

代码如下：

Current Location: <BR>

<button onclick="getLocation()">Locate</button>
<p id="demo"></p>

<script>
    var x = document.getElementById("demo");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
}

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

}
</script>

Answer 1

您需要在页面上有一对文本框，并设置它们的 values。

Current Location: <BR>

<button onclick="getLocation()">Locate</button>
<p id="demo">
    Latitude: <input type="text" id="lat">
    Longitude: <input type="text" id="lon">
</p>

<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
}

    function showPosition(position) {
        document.getElementById("lat").value = position.coords.latitude;
        document.getElementById("lon").value = position.coords.longitude;

}
</script>

您也可以通过使用 JavaScript:

写出文本框来做到这一点

    function showPosition(position) {
        x.innerHTML = "Latitude: <input type='text' id='lat' value='" + position.coords.latitude + "'> " + 
        "Longitude: <input type='text' id='lon' value='" + position.coords.longitude + "'> ";


}

Answer 2

假设您要在其中设置值的两个文本框是：

Latitude: <input type="text" id="lat"><br>
Longitude: <input type="text" id="long">

您可以将以下行添加到您的 JS 中以选择适当的文本框并存储值。

document.getElementById("lat").setAttribute("value", position.coords.latitude);

将 javascript 变量存储到 HTML 文本框中

Storing javascript variable into a HTML text box

html

javascript

gps

geolocation