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

Storing javascript variable into a HTML text box

本文关键字：文本 HTML javascript 变量 存储      更新时间：2023-09-26

我正在使用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>

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

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

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

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

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

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 + "'> ";

}
相关文章：