JSP/EL 表達式生成的動態 ID：JavaScript 無法直接讀取 Session，需服務端輸出到頁面

核心誤區

${questionNaireQuestion.serialnumber} 是**服務端 JSP/EL 表達式**，在服務端渲染時展開為具體值（如 123），瀏覽器收到的 HTML 已是 <input id="1232" ...>。**Session 存在於服務端內存，JavaScript 運行在瀏覽器，無法直接讀取 Session**。

正確獲取動態 ID 的三種方式

1. 服務端直接輸出到 JS 變量（最簡單）

<script>
    // JSP 渲染時展開為 var qId = "1232";
    var qId = '${questionNaireQuestion.serialnumber}2';
    console.log(qId); // "1232"
    // 後續用 document.getElementById(qId) 操作
</script>

2. 統一輸出配置對象（多值場景）

<script>
    window.pageConfig = {
        questionIds: [
            <c:forEach items="${list}" var="q" varStatus="s">
                '${q.serialnumber}2'<c:if test="${!s.last}">,</c:if>
            </c:forEach>
        ],
        csrfToken: '${csrfToken}'
    };
</script>

3. AJAX 獲取（動態加載/權限敏感）

// 後端提供 REST 接口
@GetMapping("/api/questions")
public List<QuestionDTO> list() { ... }

// 前端
fetch('/api/questions')
    .then(r => r.json())
    .then(list => {
        list.forEach(q => {
            const el = document.getElementById(q.serialnumber + '2');
            // 操作元素
        });
    });

注意：ID 命名規範

• ID **不能以數字開頭**，${serialnumber}2 若 serialnumber 為純數字，生成的 ID 如 1232 合法；但若為 2${serialnumber} 可能以數字開頭，建議加前綴 id="q${serialnumber}2"
• 避免特殊字符，僅用字母、數字、下劃線、連字符

總結

JavaScript **不能**直接讀取 Session。服務端渲染時將所需值**輸出到頁面 JS 變量**或**提供 API 讓前端拉取**，前端再通過 `document.getElementById` 或 `querySelector` 操作 DOM。