我有一個異步功能，它只有在我點擊搜索按鈕時才起作用，但我希望該功能也能在我按下鍵盤上的“回車”鍵時啟動。
使用 Vanilla Javascript 和異步函式可以做到這一點嗎？
我做了幾次嘗試，但似乎不起作用。
html
<input type="text" id="input-search" placeholder=""><span><button id="search-button">Search</button></span>
JS
let userName = document.querySelector("#username");
let button = document.querySelector("#search-button");
button.onclick = async function getData() {
let username = document.getElementById("input-search").value;
axios
.get(`https://api.templatewebsite`)
.then(async (response) => {
let data = await response.data;
if (response.status !== 200) {
throw new Error(response.status);
} else {
console.log(data);
}
});
};
我試圖保持代碼片段簡短，以避免不必要的資訊。
uj5u.com熱心網友回復：
是的，你可以這樣做：
let userName = document.querySelector('#username');
let button = document.querySelector('#search-button');
let input = document.querySelector('#input-search')
async function getData() {
// do some async actions
alert('getData called')
}
button.onclick = getData;
input.addEventListener('keyup', function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
getData();
}
}) <input type="text" id="input-search" placeholder=""><span><button id="search-button">Search</button></span>uj5u.com熱心網友回復：
您有兩個選擇，第一個是將其包裝在<form>組件中并在提交時處理此代碼。其次是在輸入上添加事件偵聽器并檢查它是否輸入：
userName.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
// Magic happens here
}
}
uj5u.com熱心網友回復：
我嘗試將@Shamloo 建議的代碼放入并嘗試將其調整為我的代碼。在 axios API 呼叫之后，當它嘗試獲取輸入欄位的值時會拋出錯誤。
可能我把代碼放在了錯誤的地方，因為即使輸入欄位包含正確的值它也會拋出錯誤。
我是這樣的：
let input = document.querySelector('#input-search')
async function getData(){
document.querySelector('#input-search').value
//API CALL with axios
axios.get(`https://api.webtemplate{input}`)
.then(
async response => {
let data = await response.data
//if the request can't be processed (data is not found)
if (response.status !== 200) {
throw new Error(response.status);
} else {
//request works, data is found
console.log(data)
在函式之外，在代碼的底部
button.onclick = getData;
input.addEventListener('keyup', function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
getData();
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/388669.html
標籤：javascript 异步 按钮 进入
下一篇：單擊按鈕時更改文本值