从 api 调用中检索到的数据更新 html

Question

我是网络开发新手，所以请原谅。

我进行简单的 api 调用

  const getWorldTotal = async () => {

  const response = await fetch('https://cors-anywhere.herokuapp.com/https://health-api.com/api/v1/covid-19/total');

  const worldTotal = await response.json();

  alert(worldTotal.total_confirmed)

  document.getElementById('total') = worldTotal.total_confirmed

};

getWorldTotal()

这是我正在尝试更新的 html

<div class="card text-white bg-secondary mb-3" id="total" style="max-width: 20rem;">

<div class="card-header">Header</div>

<div class="card-body">

  <h4 class="card-title" id="total"></h4>

</div>

</div>

我收到以下错误

index.html:80 未捕获（承诺中）ReferenceError：getWorldTotal 赋值中的左侧无效

我的问题是我做错了什么？这也是在进行 api 调用时更新 HTML 的最佳方法吗？

Answer 1

Document 方法 getElementById() 返回一个 Element 对象，并且您试图更改它，这会导致错误。另外，如果你想改变文本，你可以使用 innerTextconst getWorldTotal = async () => {  const response = await fetch('https://cors-anywhere.herokuapp.com/https://health-api.com/api/v1/covid-19/total');  const worldTotal = await response.json();  alert(worldTotal.total_confirmed)  document.getElementById('total').innerText = worldTotal.total_confirmed};getWorldTotal()

Answer 2

尝试这个：const xURL&nbsp; = 'https://cors-anywhere.herokuapp.com/https://health-api.com/api/v1/covid-19/total'&nbsp; ,&nbsp; &nbsp;total = document.getElementById('total')&nbsp; ;const getWorldTotal = async () => {&nbsp; let data = await (await fetch(xURL)).json()&nbsp; //console.log( 'data ', data)&nbsp;&nbsp;&nbsp; total.textContent = data.total_confirmed}getWorldTotal()

Answer 3

正如 Rajesh 和 Jojo 先生所说，我认为在“document.getElementById('total')”之后添加“.textContent”或“.innerText”将有助于解决此问题。另外，在调用函数时，可以添加分号来结束语句。getWorldTotal() + ";"。虽然这是可选的，但养成“严格”的习惯可能会很好。