在Javascript数组中引用变量

简单版本： 我有一个引用页面元素的数组列表，如下所示：

var listOfArrays = ["header", "middle", "footer"];

for(i=0; i<listOfArrays.length; i++) {
    document.getElementById(listOfArrays[i]).innerHTML({listOfArrays[i]}[cycleNumber]);
} 

对于每种类型，都有这样的数组：

var header = ["red", "blue", "green"];
var middle = ["carrot", "cucumber", "asparagus"];
var footer = ["earth", "air", "water"];

我希望能够通过运行数组动态替换页面元素的HTML，如下所示：

var listOfArrays = ["header", "middle", "footer"];

for(i=0; i<listOfArrays.length; i++) {
    document.getElementById(listOfArrays[i]).innerHTML({listOfArrays[i]}[cycleNumber]);
} 

---

for（i=0；i一种解决方案是创建一个包含其他数组的附加数组：

var IDs = ["header", "middle", "footer"];

var parts = [
    ["red", "blue", "green"],
    ["carrot", "cucumber", "asparagus"],
    ["earth", "air", "water"]
];

for (var i=0; i < IDs.length; i++) {
    document.getElementById(IDs[i]).innerHTML = parts[i][cycleNumber];
} 

这对我来说不起作用，尽管我的Javascript函数可能（我想是）坏了。我想你还没有看到我的更新。如果你查看控制台，你会发现你的代码无效：
Uncaught SyntaxError:Unexpected token[
。编辑对我也不起作用。我会调查错误的，谢谢。是的，另外，
innerHTML
是字符串，不是函数。你不能调用它，你必须分配给它。是什么让你认为它是函数？缺乏经验。你建议我改用什么？