JSP/JavaScript 動態修改 HTML 標籤 style.display 失效：變量名拼寫錯誤

代碼中 var lla = document.getElementById(qwe); 獲取元素，但後續判斷卻用了 obj.style.display (obj 未定義)，導致失效。

錯誤代碼

function xiazai(tt) {
    var lla = document.getElementById(qwe);  // qwe 應為字符串 "qwe"
    var xx = tt;
    if (xx == 45) {
        alert("1");
        obj.style.display = ' ';  // 錯誤：obj 未定義，應為 lla
    } else {
        alert("2");
        lla.style.display = 'none';
    }
}

修正代碼

function xiazai(tt) {
    var lla = document.getElementById("qwe");  // 加引號
    var xx = tt;
    if (xx == 45) {
        alert("1");
        lla.style.display = '';  // 修正變量名，空字符串顯示
    } else {
        alert("2");
        lla.style.display = 'none';
    }
}

對比：正常工作的圖片縮放代碼

function fangda(its) {
    var obj = document.getElementById(its);  // 參數直接傳 ID 字符串
    if (obj.style.width == '10%') obj.style.width = '100%';
    else obj.style.width = '10%';
}

此處變量名一致 (obj)，邏輯閉環，故正常。

調試技巧

1. 瀏覽器 F12 Console 查看 ReferenceError: obj is not defined。
2. 在 if 斷點處檢查 lla 是否為預期元素。
3. 使用 console.log(lla) 確認獲取成功。

最佳實踐

• 統一變量命名規範 (如 el, elem, $el)。
• 使用 const/let 避免變量提升導致的誤用。
• 嚴格模式 "use strict"; 可捕獲未聲明變量賦值。

修正變量名拼寫錯誤，style.display 切換即可正常生效。