JavaWeb 表單導致按鈕失效：ID 與函數名衝突引發 DOM 覆蓋

在 JSP 頁面添加 <form> 標籤後，原本正常的動態生成文本框按鈕突然失效。根因是 按鈕的 id 與 JavaScript 函數名同名，導致 form 表單元素集合覆蓋了全局函數引用。

問題代碼

<input type="button" onclick="CreateGInput()" value="創建新工序" id="CreateGInput" />
<input type="button" onclick="CreateCInput()" value="添加工序零件" id="CreateCInput" />

衝突機制

1. 無 <form> 時：CreateGInput 解析為 window.CreateGInput（全局函數），正常調用。
2. 有 <form> 時：表單元素自動成為 form.CreateGInput（DOM 元素），遮蔽了同名全局函數。
3. onclick="CreateGInput()" 在表單作用域內解析為元素對象，調用失敗拋異常。

解決方案

方案一：顯式指定 window 作用域（快速修復）

<input type="button" onclick="window.CreateGInput()" id="CreateGInput" />
<input type="button" onclick="window.CreateCInput()" id="CreateCInput" />

方案二：命名規範避免衝突（推薦）

• 函數名用動詞開頭：initCreateGInput()、handleCreateCInput()。
• 元素 ID 用名詞 + 後綴：btnCreateGInput、btnCreateCInput。
• 採用 addEventListener 綁定事件，完全分離 HTML 與 JS。

方案三：模塊化封裝（最佳實踐）

const FormManager = {
  init() {
    document.getElementById('btnCreateGInput').addEventListener('click', this.createGInput);
    document.getElementById('btnCreateCInput').addEventListener('click', this.createCInput);
  },
  createGInput() { /* ... */ },
  createCInput() { /* ... */ }
};
FormManager.init();

核心原則

• 全局命名空間極易污染：避免全局變量/函數與 DOM 元素 ID 同名。
• 優先使用事件監聽器：而非內聯 onclick，便於維護與作用域隔離。
• ES6 模塊/類封裝：將邏輯封裝在模塊作用域內，徹底避免衝突。

這是前端開發中極常見且隱蔽的坑，建立嚴格的命名規範與模塊化習慣可從根源杜絕。