Показывать сообщение "загрузка..." до получения координат

Здесь у меня уже есть скрипт для получения координат (широта и долгота). Так как, когда я нажал на кнопку, некоторые люди задаются вопросом, когда появится координата. Итак, как показать loading..., пока координата не будет отображаться во вводном тексте без перезагрузки страницы.

Вот код:

var x = document.getElementById("lati");
var y = document.getElementById("longi");

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;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}

<div class = "mb-3"><input class = "border rounded-0 form-control" type = "text" name = "business_latitude" id = "input_latitude" placeholder = "Latitude" style = "font-family: Roboto, sans-serif;" value = "<?php echo $business_latitude; ?>" required></div>
<div class = "mb-3"><input class = "border rounded-0 form-control" type = "text" name = "business_longitude" id = "input_longitude" placeholder = "Longitude" style = "font-family: Roboto, sans-serif;" value = "<?php echo $business_longitude; ?>" required></div>
<div class = "mb-3">
  <button type = "button" class = "btn btn-link" style = "font-family: Roboto, sans-serif;" onclick = "getLocation()">Current Location</button>
</div>

Вам просто нужно показать "загрузка..." и скрыть его при вставке геолокации.

— 06.05.2022 10:17

Дубликат "Как добавить текст «Пожалуйста, подождите…» при нажатии на кнопку в функции JavaScript" и многих-многих других. Некоторые ключевые слова: «заполнитель», «загрузка», «индикатор», «занято», «текст»; «асинхронно», «в ожидании».

— 06.05.2022 11:00

javascript html

06.05.2022 10:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  document.getElementById("input_latitude").value = "Loading...";
  document.getElementById("input_longitude").value = "Loading...";
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, () => {console.info("Error")});
  } else { 
      x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  console.info(position);
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}

<div id = "lati"></div>
<div id = "longi"></div>
<div class = "mb-3"><input class = "border rounded-0 form-control" type = "text" name = "business_latitude" id = "input_latitude" placeholder = "Latitude" style = "font-family: Roboto, sans-serif;" value = "<?php echo $business_latitude; ?>" required></div>
<div class = "mb-3"><input class = "border rounded-0 form-control" type = "text" name = "business_longitude" id = "input_longitude" placeholder = "Longitude" style = "font-family: Roboto, sans-serif;" value = "<?php echo $business_longitude; ?>" required></div>
<div class = "mb-3">
<button type = "button" class = "btn btn-link" style = "font-family: Roboto, sans-serif;" onclick = "getLocation()">Current Location</button>
</div>

Хотя этот код может быть полезен для OP, предоставление дополнительный контекст относительно того, почему и как он работает, и когда его следует использовать, улучшит его долгосрочную ценность, помогая другим читателям.

— 06.05.2022 10:47

В приведенном выше коде есть недостаток... Если функция не работает, это показывает, что ваш браузер не поддерживает геолокацию, но все равно будет показывать "Загрузка...".

— 06.05.2022 11:05

06.05.2022 10:22

Ответ принят как подходящий

Приведенный ниже код будет работать. Я добавил тег <p>, в котором по умолчанию нет текста. Когда пользователь нажимает кнопку, я вставляю «загрузка…» внутри тега <p>, а когда отображается результат, я возвращаю его пустым.

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  document.getElementById("loadingText").innerHTML = "loading...";
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
    document.getElementById("loadingText").innerHTML = "";
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
    document.getElementById("loadingText").innerHTML = "";
  }
}

function showPosition(position) {
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}

#loadingText {
  display: block !important;
}

<div class = "mb-3"><input class = "border rounded-0 form-control" type = "text" name = "business_latitude" id = "input_latitude" placeholder = "Latitude" style = "font-family: Roboto, sans-serif;" value = "<?php echo $business_latitude; ?>" required></div>
<div class = "mb-3"><input class = "border rounded-0 form-control" type = "text" name = "business_longitude" id = "input_longitude" placeholder = "Longitude" style = "font-family: Roboto, sans-serif;" value = "<?php echo $business_longitude; ?>" required></div>
<div class = "mb-3">
  <button type = "button" class = "btn btn-link" style = "font-family: Roboto, sans-serif;" onclick = "getLocation()">Current Location</button>
  <p id = "loadingText"></p>
</div>

— 06.05.2022 10:47

@outis Я объясняю, но я немного торопился, когда отвечал на вопрос. Я добавлю это сейчас.

— 06.05.2022 10:48

06.05.2022 10:25

var x = document.getElementById("lati");
var y = document.getElementById("longi");

function getLocation() {
  if (navigator.geolocation) {
     document.getElementById("input_latitude").value = "Loading...";
     document.getElementById("input_longitude").value = "Loading...";
     document.querySelectors('input').setAttribute("disabled");
     //input is disabled so that input can not be edited.
      navigator.geolocation.getCurrentPosition(showPosition, () => 
     {console.info("Error")});
  } else { 
      x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  console.info(position);
  x.innerHTML = position.coords.latitude;
  y.innerHTML = position.coords.longitude;
  document.getElementById("input_latitude").value = x.innerHTML;
  document.getElementById("input_longitude").value = y.innerHTML;
}

— 06.05.2022 10:47

06.05.2022 10:32