已解決430363個問題，去搜搜看，總會有你想問的

從 api 調用中檢索到的數據更新 html

首頁猿問從 api 調用中檢索到的數據更新...

從 api 調用中檢索到的數據更新 html

Html5

慕的地6264312 2023-09-18 15:55:36

我是網絡開發新手，所以請原諒。我進行簡單的 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 的最佳方法嗎？

查看完整描述

3 回答

不負相思意

TA貢獻1777條經驗獲得超10個贊

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()

反對回復 2023-09-18

HUX布斯

TA貢獻1876條經驗獲得超6個贊

嘗試這個：

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()

反對回復 2023-09-18

收到一只叮咚

TA貢獻1821條經驗獲得超5個贊

正如 Rajesh 和 Jojo 先生所說，我認為在“document.getElementById('total')”之后添加“.textContent”或“.innerText”將有助于解決此問題。

另外，在調用函數時，可以添加分號來結束語句。getWorldTotal() + ";"。雖然這是可選的，但養成“嚴格”的習慣可能會很好。

反對回復 2023-09-18

3 回答
0 關注
166 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從 api 調用中檢索到的數據更新 html

從 api 調用中檢索到的數據更新 html

3 回答

添加回答