После использования API мне не нужно было получать данные из API

Question

function modo() {
  moka = document.getElementById("sub").value;
  http = new XMLHttpRequest;
  http.open("GET", "https://reqres.in/api/users/" + moka);
  http.send();
  http.onreadystatechange = function() {
    if (this.readystatechange == 4 && this.status == 200) {
      df = JSON.parse(this.value);
      document.getElementById("we").innerHTML = df.data.first_name;
    }
  }
}

<p id="we">Default text</p>
<input id="in">
<button onclick="modo()" id="sub">Submit</button>

Здесь я использовал API для получения данных из API. Но приведенный выше код не дал мне правильного вывода.

Answer 1

Вы должны взять входное значение из элемента, содержащего id = "in", а использование остальных API указано на официальном сайте. Перейдите по этой ссылке.

https://reqres.in/

Вы должны использовать http.readyState вместо readystatechange

function modo() {
  moka = document.getElementById("in").value;
  http = new XMLHttpRequest;
  http.open("GET", "https://reqres.in/api/users/" + moka, true);
  http.onload = function(){
    if (http.readyState == 4 && http.status == 200) {
      df = JSON.parse(http.responseText);
      document.getElementById("we").innerHTML = df.data.first_name;
    }
  };
  http.send();
  
}

<p id="we">Default text</p>
<input id="in">
<button onclick="modo()" id="sub">Submit</button>

Спасибо

Answer 2

используйте readyState === 4, и вы не принимаете правильное входное значение

, пожалуйста, найдите следующий фрагмент для справки

function modo() {
  moka = document.getElementById("in").value;
  http = new XMLHttpRequest;
  http.open("GET", "https://reqres.in/api/users/" + moka);
  http.send();
  http.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      df = JSON.parse(http.responseText);
      console.log(http.responseText)

      document.getElementById("we").innerHTML = df.data.first_name;
    }
  }
}

<p id="we">Default text</p>
<input id="in">
<button onclick="modo()" id="sub">Submit</button>