javascript - Javascript Fetch API 未在多张卡片上显示结果

Question

我有一个脚本，它从链接中获取数据，然后将其插入表中并将其显示给用户。脚本运行良好。但后来我决定让函数更加动态，所以我添加了 2 个参数名称和 Html div 名称，数据将显示在其中。当我第一次调用该函数时它运行良好，但在第二次调用时它没有显示任何数据。我在我的项目中使用 PHP，并且是 javascript 的新手。但我在 PHP 中做了一个类似的函数，但它有效。有什么建议么？

function getInfoByCountry(name, displayName) {
  fetch("https://something.com/countries/" + name)
    .then(res => res.json())
    .then(data => {
      output = `
      <tr>
        <td>Total Cases</td>
        <td>${data.cases}</td>
      </tr>
      <tr>
        <td>Today Cases</td>
        <td>${data.todayCases}</td>
      </tr>
      <tr>
        <td>Deaths</td>
        <td>${data.deaths}</td>
      </tr>
      <tr>
        <td>Recovered</td>
        <td>${data.recovered}</td>
      </tr>        
      <tr>
        <td>Critical</td>
        <td>${data.critical}</td>
      </tr>
      <tr>
        <td>Active Cases</td>
        <td>${data.active}</td>
      </tr>                        
    `;
      document.getElementById(displayName).innerHTML = output;
    });
}

getInfoByCountry("USA", "USAInfo");

getInfoByCountry("China", "ChinaInfo");

<div class="table-responsive">
  <table class="table table-striped mb-0">
    <tbody id="ChinaInfo">

    </tbody>
  </table>
</div>

标签： javascripthtmlcssbootstrap-4

Answer 1

return像这样添加

 function getInfoByCountry(name, displayName) {
  var display = document.getElementById(displayName);
  return fetch("https://smthing.com/countries/"+name)
    .then(res => res.json())
    .then(data => {

      output = `
  <tr>
    <td>Total Cases</td>
    <td>${data.cases}</td>
  </tr>
  <tr>
    <td>Today Cases</td>
    <td>${data.todayCases}</td>
  </tr>
  <tr>
    <td>Deaths</td>
    <td>${data.deaths}</td>
  </tr>
  <tr>
    <td>Recovered</td>
    <td>${data.recovered}</td>
  </tr>        
  <tr>
    <td>Critical</td>
    <td>${data.critical}</td>
  </tr>
  <tr>
    <td>Active Cases</td>
    <td>${data.active}</td>
  </tr>                        
`;

  document.getElementById(displayName).innerHTML += output;

    }

    );
}


  getInfoByCountry("USA", "display");

  getInfoByCountry("China", "display");