JavaScript onclick 無法觸發自定義函數：字符串拼接語法錯誤導致腳本中斷

問題代碼定位

在 editArticle 函數中存在字符串拼接語法錯誤，導致整個 <script> 塊解析失敗，進而使頁面上所有 onclick="testButton()" 失效。

錯誤代碼

function editArticle(articleId){
    window.location.href="/blog/article/editArticle.do?articleId="+articleId+"&randomCode="Math.random(); 
    //                                    ↑ 缺少 + 號          ↑ 字符串未閉合
}

錯誤影響機制

1. 瀏覽器解析 <script> 時遇到語法錯誤
2. 整個腳本塊停止執行，後續函數定義（包括 testButton）未被註冊
3. HTML 中 onclick="testButton()" 調用未定義函數 → 靜默失效（控制台報 ReferenceError: testButton is not defined）

修正代碼

function editArticle(articleId){
    window.location.href = "/blog/article/editArticle.do?articleId=" + articleId + "&randomCode=" + Math.random();
    //                                                                    ↑ 添加 + 號           ↑ 添加 + 號
}

完善的防禦性寫法

function editArticle(articleId) {
    try {
        const baseUrl = "/blog/article/editArticle.do";
        const params = new URLSearchParams({
            articleId: articleId,
            randomCode: Math.random().toString(36).substring(2) // 更短的隨機碼
        });
        window.location.href = baseUrl + "?" + params.toString();
    } catch (e) {
        console.error("跳轉失敗:", e);
        // 降級方案
        window.location.href = "/blog/article/editArticle.do?articleId=" + encodeURIComponent(articleId);
    }
}

function testButton() {
    alert("click");
}

// 現代事件綁定最佳實踐（替代內聯 onclick）
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[data-action="test"]').forEach(btn => {
        btn.addEventListener('click', testButton);
    });
    
    document.querySelectorAll('[data-action="delete"]').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const articleId = e.target.dataset.articleId;
            deleteArticle(e.target, articleId);
        });
    });
});

HTML 改造配合

<!-- 替代 onclick="testButton()" -->
<button type="button" data-action="test">test</button>

<!-- 替代 onclick="deleteArticle(this,'...')" -->
<button type="button" data-action="delete" data-article-id="3822ff5c60d1428eb01f0bc9166bed9b">刪除</button>

調試技巧

1. 打開瀏覽器開發者工具 Console 標籤
2. 查看紅色 SyntaxError 或 ReferenceError
3. 點擊錯誤右側文件名:行號，定位具體位置
4. 使用 debugger; 斷點逐步執行

最佳實踐總結