javascript - 在 for 循环中构建字符串的问题

Question

我无法弄清楚为什么我无法通过在循环中添加其他内容来构建字符串。 JavaScript 函数如下:

function displayCountries(){
    var body = "<option value='select'>...</option>";

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = false;

    xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        var data = JSON.parse(this.responseText);

        for (var i=0;i < data.length;i++) {
            body +="<option value='" + data[i].name + "'>" + data[i].name + "</option>";
            console.log("<option value='" + data[i].name + "'>" + data[i].name + "</option>");

        }
    }
    });

    xhr.open("GET", "https://restcountries.eu/rest/v2/all?fields=name;");
    xhr.setRequestHeader("Accept","application/json");
    xhr.send(null);
    console.log(body);
    document.getElementById("country-select").innerHTML=body;
}

第一个控制台日志按照我的预期很好地打印了数据，并查看传递给 html 是否有语法错误，但是 body 变量没有在循环中添加字符串，因此第二个控制台日志log 只打印出选项“...”。

我读过这几本，但不明白为什么这不起作用。如有帮助，我们将不胜感激。

Answer 1

您正在响应可用之前设置 innerHTML 属性。

我建议您创建一个 option 元素并将其附加到 for 循环内:

function displayCountries(){
  var select = document.getElementById("country-select");
  select.innerHTML = "<option value='select'>...</option>";

  var xhr = new XMLHttpRequest();
  xhr.withCredentials = false;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
      var data = JSON.parse(this.responseText);
      for (var i = 0;i < data.length; i++) {
        var o = document.createElement('option');
        o.value = data[i].name;
        o.text = data[i].name;
        select.appendChild(o);
      }
    }
  });

  xhr.open("GET", "https://restcountries.eu/rest/v2/all?fields=name;");
  xhr.setRequestHeader("Accept","application/json");
  xhr.send(null);
}
displayCountries();

<select id="country-select"></select>