JSP 頁面中 JavaScript 控制 div 顯示/隱藏失效：腳本執行時機問題

問題現象

JSP 頁面中內嵌 JavaScript 根據 Session 權限控制 div 顯示/隱藏，頁面輸出權限值「2」正常，但目標 div 不隱藏。

代碼片段

<%
  Object k2 = session.getAttribute("power");
  out.print(Integer.parseInt(k2.toString()));
  if (Integer.parseInt(k2.toString()) == 2) {
%>
  document.getElementById('div1').style.display = "block";
  document.getElementById('div3').style.display = "none";
<% } %>

根本原因

內嵌腳本位於目標 div 元素 之前，執行時 document.getElementById 返回 null，導致後續設定 style.display 拋出錯誤（瀏覽器控制台可見）。

解決方案

1. 移動腳本位置：將腳本放在目標 div 之後，或包裹在 window.onload / $(document).ready() 中。
2. 分離關注點：JSP 僅輸出資料屬性（如 data-power="2"），由獨立 JS 檔案讀取屬性並操作 DOM。

改進示例

<div id="div1" data-power="<%=session.getAttribute('power')%>">...</div>
<div id="div3" data-power="<%=session.getAttribute('power')%>">...</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var power = document.getElementById('div1').dataset.power;
    if (power == '2') {
      document.getElementById('div1').style.display = 'block';
      document.getElementById('div3').style.display = 'none';
    }
  });
</script>

核心原則

JavaScript 操作 DOM 必須在目標元素已插入文檔樹後執行。