从 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 对象，并且您试图更改它，这会导致错误。
另外，如果你想改变文本，你可以使用 innerText

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').innerText = worldTotal.total_confirmed

};

getWorldTotal()

Answer 2

尝试这个：

const xURL  = 'https://cors-anywhere.herokuapp.com/https://health-api.com/api/v1/covid-19/total'

  ,   total = document.getElementById('total')

  ;

const getWorldTotal = async () => {

  let data = await (await fetch(xURL)).json()

  //console.log( 'data ', data)  

  total.textContent = data.total_confirmed

}

getWorldTotal()

Answer 3

正如 Rajesh 和 Jojo 先生所说，我认为在“document.getElementById('total')”之后添加“.textContent”或“.innerText”将有助于解决此问题。

另外，在调用函数时，可以添加分号来结束语句。getWorldTotal() + ";"。虽然这是可选的，但养成“严格”的习惯可能会很好。