JSP 引用 JS 函數無效：常見原因與除錯清單

問題現象

JSP 頁面引用外部 JS 檔案，呼叫 checkNum() 無反應，先前曾正常彈窗，後來失效。

排查清單

1. HTML 元素 ID 是否存在：document.getElementById("num1") 需對應 <input id="num1">，拼寫、大小寫需一致。
2. JS 載入順序：外部 JS 需在 DOM 就緒後載入，或置於 <body> 底部，或使用 defer/window.onload。
3. 函數名稱拼寫：程式碼中 doucment 拼寫錯誤，應為 document。
4. 事件綁定方式：確認 onclick="checkNum()" 或 addEventListener 正確綁定。
5. 瀏覽器快取：強制重新整理 Ctrl+F5 或清除快取。
6. 開發者工具 Console：查看紅字錯誤訊息（如 Uncaught ReferenceError、TypeError）。

修正後的 JS

function checkNum() {
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value; // 修正拼寫
    if (num1 === "" || num2 === "") {
        alert("輸入不能為空");
        return false;
    }
    return true;
}

JSP 引用範例

<script src="${pageContext.request.contextPath}/js/validate.js" defer></script>
<input type="text" id="num1" name="num1" />
<input type="text" id="num2" name="num2" />
<button onclick="return checkNum()">提交</button>

總結

優先檢查 Console 錯誤、元素 ID、JS 拼寫與載入時機，多數「突然失效」源於快取或頁面結構變更。