無法訪問屬性 "innerHTML", document.getElementById('id' +num) 即使 js 在末尾聲明

Question

我正在嘗試為 js 中數組的每一行選擇一個隨機值，但是當我運行代碼時，我得到 Uncaught TypeError: can't access property "innerHTML", document.getElementById(...) is null 即使腳本位於底部

 <p id="crit1"></p>
            <p id="crit2"></p>
            <p id="crit3"></p>
            <p id="crit4"></p>
            <p id="crit5"></p>

        <script>
        

            var criteria = [
              ['opt1', 'opt2'], 
              ['opt3', 'opt4'],
              ['opt5', 'opt6'], 
              ['opt7', 'opt8'], 
              ['opt9', 'opt10']
            ];

            for (var step = 0; step <5; step++){
                var rand = Math.round(Math.random()); //genrates either 0 or 1
                if (rand == 1) {
                    document.getElementById('crit'+ step).innerHTML = criteria[step][1];
                    var answ = answ +1;
                } else {
                    document.getElementById('crit'+ step).innerHTML = criteria[step][0];
                }
            }

Answer 1

它失敗了，因為您的crit0 step元素。

如果你添加一個crit0元素或從 1 開始你的計數器，錯誤就會消失。

還可以包含一個 null 檢查document.getElementByID()以避免在找不到元素時引發錯誤：

const critElement = document.getElementById('crit' + step);
if (critElement) {
    critElement.innerHTML = criteria[step][0];
}

Answer 2

該步驟從 0 開始。因此，第一次迭代將找到id=crit0的元素。 沒有那個名字的id。 您可以改為從 1 更改開始迭代。