Показать данные на основе входного значения

Question

Я хочу отображать данные из API, основанные на значении ввода, но прежде чем я даже что-то наберу в поле ввода, он читает значение, которое находится внутри поля сразу после ввода (в данном случае его значение не определено, потому что я ничего не печатал).

Вот что я пытался сделать:

fetch("https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=" +
    countryInput.value, {
      "method": "GET",
      "headers": {
        "x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
        "x-rapidapi-key": "20438f9eb4mshb2a68ca50196b46p1d55a5jsn2dbdc2b012cd"
      }
    })
  .then(response => {
    return response.json();
  })
  .then(data => {

      countryInput = inputElement.value

(код продолжается)

Answer 1

В Javascript, когда вы хотите что-то сделать , когда что-то еще происходит (например, при изменении входа), вы должны использовать прослушиватель событий. В частности, для вашего случая запуска запроса AJAX при изменении значения входа вам, вероятно, потребуется прослушать событие «размытия» или «изменения».

Полное объяснение того, как происходит работа событий и прослушивателей событий выходит за рамки ответа о переполнении стека, но полное объяснение см. в https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events.

Answer 2

Вот пример того, как вы будете прослушивать событие «change» в поле ввода и запускать функцию выборки, когда он обнаруживает, что пользователь ввел информацию.

Хотя стоит упомянуть, что, поскольку пользователь будет вводить название страны, функция обратного вызова (fetch()) сработает несколько раз, прежде чем они завершат sh, набрав название страны. особенно если страна имеет длинное имя. Каждый раз, когда они вводят новое письмо, вызов API сработает, и большую часть времени он не даст результатов. Это можно рассматривать как расточительство ресурсов API.

Лучше было бы предоставить кнопку «отправить» или подождать, пока пользователь нажмет клавишу ввода, прежде чем отправлять вызов API.

function fetchTheDataFromTheApi(){
  fetch("https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=" + 
  countryInput.value, {
  "method": "GET",
  "headers": {
      "x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
      "x-rapidapi-key": "20438f9eb4mshb2a68ca50196b46p1d55a5jsn2dbdc2b012cd"
   }
   } )
   .then(response => {
  return response.json();
   })
  .then(data => {
    //do something with the data here like console.log it
		console.log(data)
  })
}

document.getElementById('countryInput').addEventListener("change", fetchTheDataFromTheApi)

<input id="countryInput">