问题遇到的现象和发生背景
我需要在一个页面内插入一个文件，并用js代码处理这个文件，由于代码必须要浏览器才能处理。
尝试用sleep()函数，但会导致等待对应时长后才加载页面，而不是加载页面完成后等待对应时长再执行sleep()之后的代码。
现在它一直报错
Uncaught TypeError: Cannot set properties of null (setting 'onchange')
全代码：
<html>
<meta charset="utf-8">
<title>TEMP PAGE</title>
<head>
<style>
h1 {font-size: 36px;}
p {font-size: 25px;}
h2 {font-size: 14px;}
p.sansserif {font-family: "Microsoft YaHei";}
</style>
</head>
<body>
<p class="sansserif">首先，请点击下方按钮，并选择打开.exe显示的文件。</p>
<input name="file" id="input" type="file">
<button id="button">保存长度信息</button>
</body>
<script>
/* 创建一些数组 */
window.addEventListener('load', function () {
var text = new Array();
var width = new Array();
var height = new Array();
function sleep(d) {
for (var t = Date.now(); Date.now() - t <= d;);
}
sleep(10000);
document.getElementById('file').onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (progressEvent) {
var fileContentArray = this.result.split(/\r\n|\n/);
var line = lines[0];
console.log(lines[0]);
for (var line = 0; line < lines.length - 1; line++) {
console.log(line + " --> " + lines[line]);
}
};
reader.readAsText(file);
};
});
/*for (i = 0; i < line; i++) {
let spanDom = document.createElement("span");
spanDom.style.fontSize = "25";
spanDom.style.opacity = "0";
spanDom.innerHTML = "Hello World!";
spanDom.style.fontFamily = "Microsoft YaHei";
document.body.append(spanDom);
let size = {};
size = spanDom.getBoundingClientRect();
spanDom.remove();
console.log(size);
console.log(size.height);
console.log(size.width);
}*/
</script>
</html>
另外，可以通过c++程序向浏览器的js传入信息吗？是chrome浏览器。
处理完后能直接保存到对应位置吗？还是必须通过下载文件的方式？
