JavaScript 設置 Label 內容無效：innerHTML vs innerText 及 iframe 跨幀查找

現象

iframe 結構：top → menu, main。在 main 頁面按鈕點擊時，document.getElementById('lableinfo').innerHTML='測試' 不生效。

可能原因

1. 拼寫錯誤：ID 實際為 labelinfo（label 非 lable）。
2. 跨 iframe 查找：若 Label 在父頁或 sibling iframe，需 parent.document.getElementById(...) 或 top.frames['main'].document...。
3. 屬性選擇：純文本建議用 innerText（或 textContent），innerHTML 會解析 HTML 標籤，存在 XSS 風險。
4. 元素類型：<label> 無 value 屬性，只能改 innerText；若是 <input> 則用 .value。

修正代碼

// 假設 Label 在同一 main 頁面
var lbl = document.getElementById('labelinfo');  // 修正拼寫
if (lbl) lbl.innerText = '測試';                 // 純文本用 innerText

// 若 Label 在父頁面
// parent.document.getElementById('labelinfo').innerText = '測試';

調試技巧

• Console 輸入 document.getElementById('labelinfo') 檢查是否返回 null。
• Elements 面板搜索 ID 確認拼寫、層級。