JavaScript - 関数「click」が JSON からデータを記憶するのはなぜですか?

私は JavaScript のコースを受講しています。そのタスクは、JSONPLACEHOLDER から JSON データを取得し、ユーザー名を表示することでした。名前をクリックすると、ユーザーに関する完全なデータが表示されます。

JS コード:

const ul = document.querySelector(".list-group");
const h1 = document.querySelector("h1");

function getUsers(renderUsers) {
   const xhr = new XMLHttpRequest();
   xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
   xhr.addEventListener("load", () => {
      const response = JSON.parse(xhr.responseText);
      renderUsers(response);
   });

   xhr.addEventListener("error", () => {
      console.log("error");
   });

   xhr.send();
}

function renderUsers(response) {
   const fragment = document.createDocumentFragment();
   response.forEach((user) => {
      const li = document.createElement("li");
      li.classList.add("list-group-item");
      li.textContent = user.name;
      li.addEventListener("click", (e) => {
         h1.innerHTML = `<h3>Email: ${user.email} <br>
                          Username: ${user.username} <br></h3>
                          Address: <h5>${user.address["street"]}, ${user.address["city"]}, ${user.address["zipcode"]}</h5>
                          </h3>Phone: ${user.phone}
                          </h3>`;
      });
      fragment.appendChild(li);
   });
   ul.appendChild(fragment);
}

getUsers(renderUsers);

それでは、なぜ情報が表示されるのかわかりません。結局、これはどこにも保存されていないか、何かがわかりません。 クリックするとどこから情報が得られるのか、ロジックを教えてください。

関数 getUsers は、https://jsonplaceholder.typicode.com/users にリクエストを送信し、ユーザーの JSON データを返します。次に、関数 renderUsers が呼び出され、ループします。解析された JSON データを解析し、完全なデータを含むユーザーを HTML に挿入/レンダリングします。

XMLHttpRequests の詳細 https://www.w3schools.com/xml/xml_http.asp

行われたリクエストからの最初のサンプル ユーザー情報

  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }

JSON について https://www.w3schools.com/js/js_json_intro.asp

5

クリック時にイベント リスナーを追加すると、HTML が情報を記憶し、クリックしたときにそれを表示するということですか?

2020 年 9 月 3 日 11:01

ボタンをクリックするためのイベント リスナーを追加します。ボタンがクリックされると getUsers メソッドが呼び出され、上記の説明が行われます。 HTML は「記憶」しません。どのような情報であっても、それは受信したデータと既存の HTML タグを使用して生成された単なるテキストであり、ウェブページ上で確認できます。

2020 年 9 月 3 日 11:08

JavaScript に進む前に、HTML、CSS などの基本から始める必要があると思います。& json。

2020 年 9 月 3 日 11:10

私は CSS と HTML の基本を知っていますが、それがどのように機能するのかは誰も知りません。もちろん、html が単なるテキストであることは知っています。しかし、教師はそれぞれ URL で json にアクセスして情報を取得します。なぜ私のバージョンが機能するのか理解できませんでした。

2020 年 9 月 3 日 12:27

本当にそうではありません何を達成しようとしているのかを理解してください。あなたは、ボタンのクリック時にユーザー情報が表示される理由の背後にあるロジックを知りたいと考えていたので、それについて説明しました。

2020 年 9 月 3 日 14:05