如何逐步更新页面元素？文件读取后元素显示'unidentified'原因排查

问题2：选择文件后页面元素显示undefined的原因 #

1. 缺少文件输入控件：你的HTML代码里没有<input type="file" id="files">元素，导致document.getElementById('files')返回null，无法绑定onchange事件，后续读取文件的逻辑根本不会触发。
2. 循环变量作用域问题：循环中使用var i，var是函数级作用域，所有then回调共享同一个i变量。当1秒延迟结束后，循环已经执行完毕，i的值等于数组长度，此时usingSplit[i]就是undefined，页面显示时会呈现为undefined（你描述的'unidentified'应为拼写误差）。
3. 未声明的全局变量：variableIs和lengthOf没有用let/const声明，会自动成为全局变量，容易引发意外的变量污染。

问题1：如何逐步更改页面中的元素 #

要实现每隔1秒依次展示数组元素，需要让异步操作按顺序执行，而非同时触发所有延迟。可以通过async/await实现这一逻辑：

修改后的JavaScript代码 #

function getElement() {
    const fileInput = document.getElementById('files');
    if (!fileInput) return;

    fileInput.onchange = function() {
        const file = this.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.readAsText(file);
        
        reader.onload = async function() {
            const content = this.result;
            // 分割后过滤空元素，避免显示空白内容
            const usingSplit = content.split(' ').filter(item => item.trim() !== '');

            async function display(items) {
                for (const item of items) {
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    document.getElementById('test').innerHTML = item;
                }
            }
            display(usingSplit);       
        }
    }   
}

getElement();

修改后的HTML代码（补充文件输入框） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="test">TEST</h1>
    <!-- 添加文件选择控件 -->
    <input type="file" id="files">
    <script src="test4.js"></script>
</body>
</html>

核心改进说明 #

• 用async/await让每个延迟操作等待前一个完成后再执行，实现真正的逐步更新。
• 用const/let声明变量，避免全局污染和作用域混乱。
• 增加空元素过滤和空值判断，提升代码健壮性。

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