Как очистить текстовое поле после снятия флажка без исчезновения текстового поля (JavaScript) - PullRequest
0 голосов
/ 28 августа 2018

Я новичок в 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>

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Чтобы очистить ввод, вам нужно установить значение вместо 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>
0 голосов
/ 28 августа 2018

Не могли бы вы попробовать?

document.getElementById('myCheck').value = "";
...