JavaScript 實現輸入框文字追加輸入：計算器顯示完整公式的技巧

問題背景

在開發簡單的網頁計算器時，常見的需求是點擊按鈕後將數字或運算符追加到輸入框中，並在輸入框即時顯示完整的計算公式。許多初學者習慣直接覆寫 input.value，導致只能顯示最後一個字符，無法形成完整的表達式。

核心解決方案

關鍵在於「先獲取當前值，拼接後再賦值」。具體步驟如下：

1. 使用 input.value 獲取輸入框當前的字符串內容。
2. 將新點擊的按鈕值（數字、運算符等）拼接到該字符串末尾。
3. 將拼接後的新字符串重新賦值給 input.value。

代碼示例

// 獲取輸入框 DOM 元素
const display = document.getElementById('calc-display');

// 綁定按鈕點擊事件（以數字按鈕為例）
document.querySelectorAll('.num-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 核心邏輯：獲取 -> 拼接 -> 賦值
    display.value += btn.dataset.value;
  });
});

// 運算符按鈕同理
document.querySelectorAll('.op-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    display.value += btn.dataset.value;
  });
});

進階提示

• 防止重複運算符：在拼接前檢查最後一個字符是否為運算符，避免出現 ++、+- 等無效表達式。
• 使用 eval() 謹慎計算：雖然 eval(display.value) 可快速得出結果，但存在安全風險，生產環境建議使用表達式解析庫（如 math.js）或自行實現解析器。
• 清空與刪除功能：提供「C」清空鍵（display.value = ''）和「DEL」退格鍵（display.value = display.value.slice(0, -1)）。

掌握這一「獲取-拼接-賦值」模式，不僅適用於計算器，也廣泛用於表單即時預覽、標籤輸入、聊天輸入框等場景。