HTML/JS 錯誤排查：onclick 不觸發因 ID 寫錯包含等號

錯誤代碼片段

<input id=\"=mynum\" type=\"text\" placeholder=\"請輸入一個數字\" value=\"\" />
<input type=\"button\" value=\"確定\" onclick=\"G()\" />
<div id=\"myd\"></div>

<script>
function G() {
    n = parseInt(document.getElementById(\"mynum\").valueOf); // 此處正確寫 \"mynum\"
    document.getElementById(\"myd\").innerText = fn(n);
}
</script>

問題定位

HTML 屬性 id=\"=mynum\" 包含等號，導致：

1. document.getElementById(\"mynum\") 找不到元素（ID 不匹配）。
2. 返回 null，調用 .valueOf 拋出 TypeError，函數中斷。

修正

<input id=\"mynum\" type=\"text\" placeholder=\"請輸入一個數字\" value=\"\" />

移除等號，ID 僅含字母數字下劃線連字號，且**全局唯一**。

其他代碼改進建議

• valueOf 是函數引用，應為 .value 取得輸入框值。
• parseInt 建議指定基數 parseInt(val, 10)。
• fn 函數中 onLiBlack 拼寫錯誤（應為 onLiblack），會導致 ReferenceError。
• 使用 const/let 替代隱式全域變數。
• 斐波那契遞歸效率極低，改用迭代或備忘錄。

修正後完整可運行片段

<!DOCTYPE html>
<html><body>
<input id=\"mynum\" type=\"text\" placeholder=\"請輸入一個數字\" />
<button onclick=\"calcFib()\">計算</button>
<div id=\"result\"></div>

<script>
function fib(n) {
    if (n <= 1) return n;
    let a = 0, b = 1, c;
    for (let i = 2; i <= n; i++) { c = a + b; a = b; b = c; }
    return b;
}
function calcFib() {
    const val = document.getElementById('mynum').value;
    const n = parseInt(val, 10);
    if (isNaN(n) || n < 0) { alert('請輸入非負整數'); return; }
    document.getElementById('result').textContent = 'F(' + n + ') = ' + fib(n);
}
</script>
</body></html>

總結

**ID 拼寫錯誤（含非法字元）是前端新手最高頻 Bug**。瀏覽器開發者工具 Console 會直接報 Cannot read property 'valueOf' of null，順藤摸瓜即可定位。養成：複製 ID 而非手打、使用 const 變數儲存 DOM 引用、善用 Console 除錯。