javascript - 取消选中复选框后如何在文本框不消失的情况下清除文本框(JavaScript)

Question

我是 HTML、CSS 和 JavaScript 的新手，所以请多多包涵。

我正在尝试创建一个表单，其中包含一个元素，该元素使用地理定位在用户选中复选框时获取用户的当前位置，并将坐标输入我设置的文本框内。这工作正常，但是当我取消选中该复选框时，坐标与文本框一起消失。

如何只清除坐标而不使文本框也消失？

下面是我的代码:

function getLocation(myCheck) {

  var x = document.getElementById("place");

  if (myCheck.checked) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.innerHTML = "Geolocation disabled or unavailable.";
    }

    function showPosition(position) {
      x.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
    }
  } else {
    x.innerHTML = "";
  }
}

<h4> Coordinates: <label id="place"><input type="text"></label><label>Use current location? <input id="myCheck" onclick="getLocation(this)" type="checkbox"></label>
</h4>

Answer 1

要清空输入，您需要设置值而不是 innerHTML。另请注意，您可以避免在 label 标签内创建输入，只需使用 id 和 for 属性

function getLocation(myCheck) {

  var x = document.getElementById("place");

  if (myCheck.checked) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.value = "Geolocation disabled or unavailable.";
    }
  } else {
    x.value = "";
  }
}


function showPosition(position) {
  x.innerHTML = position.coords.latitude + ", " + position.coords.longitude;
}

<h4> Coordinates: <label for="place">
<input id ="place" type="text"></label>
  <label for="myCheck">Use current location?
<input id="myCheck" onclick="getLocation(this)" type="checkbox">
</label>
</h4>