表格生成Javascript函数导致页面加载错误
最近,我一直在尝试用html动态创建一个表,其中包含某个文件夹中的所有文件。我决定创建一个批处理文件来创建一个包含所有文件列表的文本文件,然后在javascript函数中使用生成的文本文件来填充表格 在页面加载时调用函数showDownloads,并引发以下错误:表格生成Javascript函数导致页面加载错误,javascript,xmlhttprequest,onload,Javascript,Xmlhttprequest,Onload,最近,我一直在尝试用html动态创建一个表,其中包含某个文件夹中的所有文件。我决定创建一个批处理文件来创建一个包含所有文件列表的文本文件,然后在javascript函数中使用生成的文本文件来填充表格 在页面加载时调用函数showDownloads,并引发以下错误: Uncaught TypeError: Cannot read property 'length' of undefined at showDownloads (script.js:8) at onload ((ind
Uncaught TypeError: Cannot read property 'length' of undefined
at showDownloads (script.js:8)
at onload ((index):9)
但是,如果我从控制台运行showDownloads,它会正确地生成表,而不会抛出任何错误
var downloadPath = "../builds/dev-versions/";
var downloads;
function showDownloads() {
getData();
var table = document.getElementById('downloadTable');
for (var i = 0; i < downloads.length; i++) { //Error happens here
var row = document.createElement('tr');
for (var j = 0; j < downloads[i].length; j++) {
var cell = document.createElement('td');
var file = document.createElement('a');
file.setAttribute('href', downloadPath + downloads[i][j]);
file.setAttribute('download', downloads[i][j]);
file.innerHTML = downloads[i][j];
cell.appendChild(file);
row.appendChild(cell);
}
table.appendChild(row);
}
}
function getData() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var lines = xmlhttp.responseText;
intoArray(lines);
}
}
xmlhttp.open("GET", "devFiles.txt", true);
xmlhttp.send();
}
function intoArray (lines) {
var lineArr = lines.split('\n');
lineArr.pop();
downloads = new Array(lineArr.length / 2);
var j = 0;
for (var i = 0; i < lineArr.length; i += 2) {
downloads[j] = [lineArr[i], lineArr[i + 1]];
j++;
};
}
为什么在第一次调用期间阵列下载被认为是未定义的
为什么不通过调用getData来创建它?我认为这是一个异步问题,for循环不会等待getData完成,因此在页面加载时,下载仍然是空的,但当您在控制台中尝试时,下载将完成并将数据存储在下载中。因为它是一个全局变量,所以当您在控制台中运行它时,它实际上可能正在处理来自上一次数据获取的数据。它已创建。。。。它只是异步的。。。。由于您不使用承诺和。那么,在getData实际获取数据之前,您的代码将继续。稍后,当您打开控制台并键入内容时,它就在那里,可以正常工作了。啊。。。我不知道这可能是个问题。由于我在编程方面相对缺乏经验,所以我假设getData默认情况下会在继续之前完成。我将研究承诺和。然后,Thank.getData确实会完成,但由于编写getData的方式的性质,所述函数的结果不会出现在downloads变量中。也就是说,用于处理HTTP请求的事件处理程序onreadystatechange,顾名思义,一旦readystate发生更改,就会被触发,这不一定发生在您尝试访问下载变量之前。事实上,在您尝试访问它之前,它肯定不会启动。这就是为什么理解同步和异步之间的区别很重要的原因。我研究了承诺,最终找到了JavaScript的获取API。我在我的网站上实现了这一点,现在一切正常。谢谢你的帮助。