使用 javascript， .innerHTML 更改输入的值

Change value of an input with javascript, .innerHTML

本文关键字：输入 javascript innerHTML 使用      更新时间：2023-09-26

我正在尝试获取用户位置，然后插入到两个单独的<input>字段中。该脚本在尝试打印到 <p id="lat"></p> 时有效。但不是为了<input>.

<form>
    <input type="number" step="any" name="lat" id="lat" value="" />
    <input type="number" step="any" name="lng" id="lng" value="" />
</form>
<button onclick="getLocation()">Get current location</button>
<script>
    var x = document.getElementById("lat").value;
    var y = document.getElementById("lng").value;
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        x.innerHTML = position.coords.latitude;
        y.innerHTML = position.coords.longitude;
    }
</script>

我在这里错过了什么？在可验证的末尾添加了.value，我想知道它是否是data类型和/或step值？

x没有

innerHTML，因为x等于#lng元素中保存的字符串值。它不等于元素本身。

与其将x和y设置为每个元素的value，不如将它们设置为元素本身：

var x = document.getElementById("lat");
var y = document.getElementById("lng");

然后您可以使用x.value和y.value（x.innerHTML或y.innerHTML）设置值：

x.value = "Geolocation is not supported by this browser.";

和：

function showPosition(position) {
    x.value = position.coords.latitude;
    y.value = position.coords.longitude;
}

只是设置x.value= position.coords.latitude;

并删除初始化 x= document.getElementById("lat"); 

var x = document.getElementById("lat");
    var y = document.getElementById("lng");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        x.value= position.coords.latitude;
        y.value= position.coords.longitude;
    }
相关文章：