JavaScript 函數未定義錯誤：變量名拼寫不一致導致的經典 Case-sensitive 問題

錯誤代碼片段

function process() {
    onHello = document.createTextNode("xxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
    onUl = document.createElement("ul");
    onLiblack = document.createElement("li");  // 變量名: onLiblack
    black = document.createTextNode("black");
    onLiBlack.appendChild(black);              // 使用時: onLiBlack (大寫 B)
    // ...
}

根因：JavaScript 區分大小寫

• 聲明變量 onLiblack（小寫 b）
• 調用 onLiBlack.appendChild()（大寫 B）
• JavaScript 視為兩個不同標識符，onLiBlack 未定義 → ReferenceError

修正代碼

function process() {
    const helloText = document.createTextNode("xxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
    const ul = document.createElement("ul");
    
    const liBlack = document.createElement("li");
    const blackText = document.createTextNode("black");
    liBlack.appendChild(blackText);  // 統一使用 liBlack
    
    const liOrange = document.createElement("li");
    const orangeText = document.createTextNode("orange");
    liOrange.appendChild(orangeText);
    
    const liPink = document.createElement("li");
    const pinkText = document.createTextNode("pink");
    liPink.appendChild(pinkText);
    
    ul.appendChild(liBlack);
    ul.appendChild(liOrange);
    ul.appendChild(liPink);
    
    const div = document.getElementById("mydivElement");
    div.appendChild(helloText);
    div.appendChild(ul);
}

最佳實踐：避免此類錯誤

1. 使用 const/let 替代隱式全局變量
2. 統一命名規範：camelCase（如 liBlack）
3. 啟用 ESLint：no-undef 規則可靜態檢測
4. IDE 智能提示：VS Code/WebStorm 會標記未聲明變量
5. 代碼審查：重點檢查 DOM 操作變量一致性

調試技巧

// 瀏覽器 Console 直接輸入變量名檢查
> onLiblack
< li element
> onLiBlack
< ReferenceError: onLiBlack is not defined

擴展：其他常見未定義錯誤