我正在嘗試獲取幾個輸入欄位的值，然后使用 JS 函式在頁面上的其他位置顯示這些值。我將有 10 個輸入欄位，因此有沒有辦法可以優化我的 JS 代碼并撰寫一個函式來回圈輸入欄位的值并在之后顯示它們？這是我為兩個不同領域撰寫的兩個函式：
function gotoTask() {
var message = document.getElementById("goto").value;
goto_message.innerHTML = message;
}
function waitTask() {
var message = document.getElementById("wait").value;
wait_message.innerHTML = message;
}
uj5u.com熱心網友回復：
你可以寫一個咖喱/工廠函式：
function createTaskFn(el, messageElId) {
return function() {
var message = document.getElementById(messageElId).value;
el.innerHTML = message;
};
}
var gotoTask = crateTaskFn(goto_message, 'goto');
var waitTask = crateTaskFn(wait_message, 'wait');
uj5u.com熱心網友回復：
為所有輸入提供相同的類，然后通過 let inputArr = document.getElementsByClassName('inputsClass') 選擇它們，然后遍歷 inputArr 并顯示它們的值。
uj5u.com熱心網友回復：
您可以像這樣將所有ID存盤在一個陣列中
const inputIds = ['goto', 'wait', ...]
然后您可以遍歷該陣列并像這樣呼叫您的方法
inputIds.forEach((id) => {
const message = document.getElementById(id).value;
document.getElementById(`${id}_message`).innerHTML = message;
})
我的實作的缺點：訊息欄位的 id 必須具有相同的結構 [id]_message
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506751.html
標籤：javascript