3 回答

TA貢獻1829條經(jīng)驗 獲得超6個贊
您不需要表單來獲取數(shù)據(jù)。我的建議:
getData.onclick = () => {
fetch('https://www.alphavantage.co/query?function=EARNINGS&symbol=IBM&apikey=demo')
.then(res => res.text())
.then((out) => {
let jsonData = JSON.parse(out);
for (let i = 0; i < jsonData.quarterlyEarnings.length; i++) {
let earnings = jsonData.quarterlyEarnings[i];
myData.innerHTML +=
"<tr><td>" + earnings.reportedDate + "</td>" +
"<td align='right'>" + earnings.reportedEPS + "</td>" +
"<td align='right'>" + earnings.estimatedEPS + "</td>" +
"<td align='right'>" + earnings.surprise + "</td></tr>";
};
})
.catch(err => console.error(err));
}
<button type="button" id="getData">Get data</button>
<table>
<thead>
<tr>
<th>Reported Date</th>
<th>Reported EPS</th>
<th>Estimated EPS</th>
<th>Surprise</th>
</tr>
</thead>
<tbody id="myData">
<tbody>
</table>

TA貢獻1878條經(jīng)驗 獲得超4個贊
當您單擊標簽中的按鈕時,您的頁面將刷新,您應該像這樣避免這種情況
const getEarnings = (e) => {
// prevent browser from refreshing
e.preventDefault()
fetch()
}

TA貢獻1770條經(jīng)驗 獲得超3個贊
一些東西:
使用“onclick”而不是“onClick”(參見底部的注釋)
在引號內(nèi)設置對 HTML 屬性的調(diào)用,如下所示:
onClick="getEarnings();"
停止事件傳播,因為您的按鈕是提交類型并將強制頁面重新加載。這可以通過幾種方式完成:
您可以將按鈕類型設置為“按鈕”而不是“提交”,因為后者會強制頁面重新加載。
您可以將事件接受到函數(shù)中,然后停止事件繼續(xù),如下所示:
function getEarnings (e) {
// This will stop a submit button from reloading the page
e.preventDefault();
// Logic here
}
理想情況下,您應該將此邏輯完全放在腳本中,其中您的按鈕具有唯一的id,您可以在 DOM 加載時定位并在其上設置事件偵聽器。這樣您就可以將所有這些移動到一個單獨的文件中,并將表示和邏輯分開。在我的腦海中,它會是這樣的:
window.addEventListener('DOMContentLoaded', function () {
const submit = document.getElementById('Submit');
submit.addEventListener('click', function (e) {
e.preventDefault();
// run logic
});
});
筆記:
關于#1,使用小寫字母是一個好習慣,因為在 JS 中
onClick
不會以相同的方式工作:onclick 或 onClick?如果您需要舊版瀏覽器支持,您應該注意單擊事件的一些奇怪之處:addEventListener 與 onclick
添加回答
舉報