加载表格时报usersArray未定义、innerHTML赋值null的JS错误求助

报错原因 #

两个运行错误外加两个隐藏逻辑bug的根源如下：

• Uncaught ReferenceError: usersArray is not defined：usersArray是onreadystatechange回调的内部变量，作用域仅局限在回调函数内，你在回调外、xhttp.send()后写的console.log(usersArray)根本访问不到这个变量。再加AJAX是异步执行，就算把变量声明挪到外层，这行log执行时请求还没返回，变量也没有赋值。
• Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')：你把trgames.js放在<head>里加载，JS执行时页面body里的<tbody id="user-tbody">还没渲染，顶层执行document.getElementById('user-tbody')拿到的是null，等AJAX返回给null设置innerHTML自然报错。
• 隐藏bug1：数组长度属性拼写错误，lenght是错误写法，正确为length，少打一个t会导致for循环根本不执行。
• 隐藏bug2：循环内拼接HTML用了赋值符=而不是累加符+=，就算循环正常执行，最后也只会渲染最后一条用户数据，前面的内容会被覆盖。

修复方法 #

两种方案二选一即可，同时修正两个隐藏bug：

方案1：调整JS执行时机（推荐） #

给JS逻辑加DOM加载完成监听，不用改HTML结构，修复后代码如下：

document.addEventListener('DOMContentLoaded', () => {
    const userTbody = document.getElementById('user-tbody');

    function loadUsers(){
        const xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200){
                const usersArray = JSON.parse(this.responseText);
                let tbodyHtml = "";
                // 修正length拼写，用+=累加HTML
                for(let index = 0; index < usersArray.length; index++) {
                    const user = usersArray[index];
                    tbodyHtml += `<tr>
                        <td>${user.id}</td>
                        <td>${user.username}</td>
                        <td>${user.password}</td>
                        <td>${user.birthdate}</td>
                    </tr>`;
                }
                userTbody.innerHTML = tbodyHtml;
                // 日志放到回调内部，可正常访问usersArray
                console.log(usersArray);
            }
        };
        xhttp.open("GET", "http://localhost:8279/users", true);
        xhttp.send();
    }
    loadUsers();
})

方案2：调整脚本引入位置 #

把<script src="js/trgames.js"></script>从<head>标签移到</body>闭合标签前，确保JS执行时所有DOM元素已经渲染完成，同时修正JS里的拼写错误、拼接符错误、删掉作用域外的log语句即可。

内容的提问来源于stack exchange，提问作者Zombotan