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

Question

我正在尝试获取用户位置，然后插入到两个单独的 <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 类型 and/or step 值？

Answer 1

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;
}

Answer 2

只需设置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;
    }

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

Change value of an input with javascript, .innerHTML

javascript

html

dom