Javascript代码没有'；不出现在页面上

我有两个javascript列表，它们有各自的div。这是我为这两个项目编写的代码：

这些是“HTML列表”页面的tje//数据

var fruits=[“苹果”、“橙子”、“梨”、“葡萄”、“菠萝”、“芒果”]；
变量目录=[
{键入：“文件”，名称：“file1.txt”}，
{键入：“文件”，名称：“file2.txt”}，
{type:“目录”，name:“HTML文件”，Files:[{type:“file”，name:“file1.HTML”}，{type:“file”，name:“file2.HTML”}]}，
{键入：“文件”，名称：“file3.txt”}，
{type:“目录”，name:“JavaScript文件”，Files:[{type:“文件”，name:“file1.js”}，{type:“文件”，name:“file2.js”}，{type:“文件”，name:“file3.js”}]}
];
window.onload=函数（）{
水果。分类（）；
var ol=“”
对于（变量i=0；i”+水果[i]+“”
}ol+=“”
var myContainer=document.querySelector（“olContainer”）.innerHTML=ol；
};
window.onload=函数（）{
var ul=“
”；
对于（var i=0；i”+目录[i]。名称；
if（目录[i].文件）{
ul+=“
”；
对于（var j=0；j”+目录[i]。文件[j]。名称+””；
}
ul+=“
”；
}
ul+=“”；
}
ul+=“
”；
var myContainer=document.querySelector（“ulContainer”）.innerHTML=ul；
};

HTML列表
水果单
目录列表
这里的问题是，您正在对
窗口
对象的
onload
属性进行写入。这是一个在浏览器加载页面时调用的函数

通过分配两次，您将覆盖以前分配给它的函数，因此只显示
ul
列表

相反，您可以将这两个函数编写为单独命名的函数，例如
addMyUl
和
addMyOl
，然后在
窗口中定义的一个主
onload
函数中调用它们

例如，类似这样的内容：

function addMyOl(){

  fruits.sort();

  var ol = "<ol>"
  for(var i = 0; i < fruits.length; i++){
      ol+= "<li>" + fruits[i] + "</li>"
  }ol += "</ol>"

  var myContainer = document.querySelector("#olContainer").innerHTML = ol;
};

function addMyUl(){
  var ul = "<ul>";

  for(var i = 0; i < directory.length; i++){
      ul += "<li>" + directory[i].name;
      if(directory[i].files) {
        ul += "<ul>";
        for(var j = 0; j < directory[i].files.length; j++) {
          ul += "<li>" + directory[i].files[j].name + "</li>";
        }
        ul += "</ul>";
      }
      ul += "</li>";
  }
  ul += "</ul>";

  var myContainer = document.querySelector("#ulContainer").innerHTML = ul;
};

window.onload = function() {
  addMyOl();
  addMyUl();
};

这是因为您设置了两次
window.onload
，第二次将覆盖第一次。因此，您应该使用
window.addEventListener（“load”，f）
：


var fruits=[“苹果”、“橙子”、“梨”、“葡萄”、“菠萝”、“芒果”]；
变量目录=[
{键入：“文件”，名称：“file1.txt”}，
{键入：“文件”，名称：“file2.txt”}，
{type:“目录”，name:“HTML文件”，Files:[{type:“file”，name:“file1.HTML”}，{type:“file”，name:“file2.HTML”}]}，
{键入：“文件”，名称：“file3.txt”}，
{type:“目录”，name:“JavaScript文件”，Files:[{type:“文件”，name:“file1.js”}，{type:“文件”，name:“file2.js”}，{type:“文件”，name:“file3.js”}]}
];
addEventListener（“加载”，函数（）{
水果。分类（）；
var ol=“”
对于（变量i=0；i”+水果[i]+“”
}ol+=“”
var myContainer=document.querySelector（“olContainer”）.innerHTML=ol；
});
addEventListener（“加载”，函数（）{
var ul=“
”；
对于（var i=0；i”+目录[i]。名称；
if（目录[i].文件）{
ul+=“
”；
对于（var j=0；j”+目录[i]。文件[j]。名称+””；
}
ul+=“
”；
}
ul+=“”；
}
ul+=“
”；
var myContainer=document.querySelector（“ulContainer”）.innerHTML=ul；
});

HTML列表
水果单
目录列表
问题在于您正在重新定义卸载功能。实际上，在执行过程中只分配了第二个函数。尝试使用
addEventListener（）
函数添加这两个函数

window.addEventListener("load", olFunction);
window.addEventListener("load", ulFunction);

窗口。第二个函数将覆盖onload
。您必须在一个函数中编写所有内容

window.onload = function(){
    fruits.sort();

    var ol = "<ol>"
    for(var i = 0; i < fruits.length; i++){
        ol+= "<li>" + fruits[i] + "</li>"
    }ol += "</ol>"

    var myContainer = document.querySelector("#olContainer").innerHTML = ol;
    var ul = "<ul>";

    for(var i = 0; i < directory.length; i++){
        ul += "<li>" + directory[i].name;
        if(directory[i].files) {
          ul += "<ul>";
          for(var j = 0; j < directory[i].files.length; j++) {
            ul += "<li>" + directory[i].files[j].name + "</li>";
          }
          ul += "</ul>";
        }
        ul += "</li>";
    }
    ul += "</ul>";

    var myContainer = document.querySelector("#ulContainer").innerHTML = ul;
};

window.onload=function（）{
水果。分类（）；
var ol=“”
对于（变量i=0；i”+水果[i]+“”
}ol+=“”
var myContainer=document.querySelector（“olContainer”）.innerHTML=ol；
var ul=“
”；
对于（var i=0；i”+目录[i]。名称；
if（目录[i].文件）{
ul+=“
”；
对于（var j=0；j”+目录[i]。文件[j]。名称+””；
}
ul+=“
”；
}
ul+=“”；
}
ul+=“
”；
var myContainer=document.querySelector（“ulContainer”）.innerHTML=ul；
};
尝试在函数中分离代码，并在加载windows时调用所有需要的函数


var目录=[
{键入：“文件”，名称：“file1.txt”}，
{键入：“文件”，名称：“file2.txt”}，
{
键入：“目录”，
名称：“HTML文件”，
文件：[{type:“file”，name:“file1.html”}，{type:“file”，name:“file2.html”}]
},
{键入：“文件”，名称：“file3.txt”}，
{
键入：“目录”，
名称：“JavaScript文件”，
文件：[{type:“file”，name:“file1.js”}，{type:“file”，name:“file2.js”}{
键入：“文件”，
名称：“file3.js”
}]
}
];
var水果=[“苹果”、“橙子”、“梨”、“葡萄”、“菠萝”、“芒果”]；
window.onload=函数（）{
满载（）；
olLoad（）；
};
函数ulLoad（）{
水果。分类（）；
var ol=“”
对于（变量i=0；i”+水果[i]+“”
}
ol+=“”
var myContainer=document.querySelector（“olContainer”）.innerHTML=ol；
}
函数olLoad（）{
变量ul=”<
window.onload = function(){
    fruits.sort();

    var ol = "<ol>"
    for(var i = 0; i < fruits.length; i++){
        ol+= "<li>" + fruits[i] + "</li>"
    }ol += "</ol>"

    var myContainer = document.querySelector("#olContainer").innerHTML = ol;
    var ul = "<ul>";

    for(var i = 0; i < directory.length; i++){
        ul += "<li>" + directory[i].name;
        if(directory[i].files) {
          ul += "<ul>";
          for(var j = 0; j < directory[i].files.length; j++) {
            ul += "<li>" + directory[i].files[j].name + "</li>";
          }
          ul += "</ul>";
        }
        ul += "</li>";
    }
    ul += "</ul>";

    var myContainer = document.querySelector("#ulContainer").innerHTML = ul;
};