javascript - 使用 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输入和/或 step值(value)观？

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