无法访问属性 "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 更改开始迭代。