Javascript代码不会显示在页面上

Question

我有2个javascript列表<ol>＆amp; <ul>有他们独特的div。这是我的两个代码：

这些是＆＃34; HTML列表的数据＆＃34;页

＆＃13;

＆＃13;

var fruits = [ "Apples","Oranges","Pears","Grapes","Pineapples","Mangos" ];

var directory = [
    {type: "file", name: "file1.txt"},
    {type: "file", name: "file2.txt"},
    {type: "directory", name: "HTML Files", files: [{type: "file", name: "file1.html"},{type: "file", name: "file2.html"}]},
    {type: "file", name: "file3.txt"},
    {type: "directory", name: "JavaScript Files", files: [{type: "file", name: "file1.js"},{type: "file", name: "file2.js"},{type: "file", name: "file3.js"}]}
];

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;
};

window.onload = function(){
    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;
};

＆＃13;

<section class="main center">

        <!-- Start your code here -->
        <h2>HTML Lists</h2>

        <h4>Fruit List</h4>
        <div id="olContainer"></div>

        <h4>Directory List</h4>
        <div id="ulContainer"></div>

        <!-- End your code here  -->
    </section>

＆＃13;

＆＃13;

＆＃13;

但似乎只显示<ul>列表。我无法为<ol>获取任何内容。

Answer 1

这里的问题是您正在写onload对象上的window属性。这是一个在浏览器加载页面时调用的函数。

通过分配两次，您将覆盖分配的前一个功能，因此只显示ul列表。

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

例如，像这样：

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();
};

或者，最有可能最好的选择是将两个函数添加为新event listeners。例如，您可以改为使用：

window.addEventListener('load', function() {
    // func body
})

Answer 2

那是因为你设置window.onload两次，第二次覆盖第一次。因此，您应该使用window.addEventListener("load", f)代替：

＆＃13;

＆＃13;

var fruits = [ "Apples","Oranges","Pears","Grapes","Pineapples","Mangos" ];

var directory = [
    {type: "file", name: "file1.txt"},
    {type: "file", name: "file2.txt"},
    {type: "directory", name: "HTML Files", files: [{type: "file", name: "file1.html"},{type: "file", name: "file2.html"}]},
    {type: "file", name: "file3.txt"},
    {type: "directory", name: "JavaScript Files", files: [{type: "file", name: "file1.js"},{type: "file", name: "file2.js"},{type: "file", name: "file3.js"}]}
];

window.addEventListener("load",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;
});

window.addEventListener("load", function(){
    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;
});

＆＃13;

<section class="main center">

        <!-- Start your code here -->
        <h2>HTML Lists</h2>

        <h4>Fruit List</h4>
        <div id="olContainer"></div>

        <h4>Directory List</h4>
        <div id="ulContainer"></div>

        <!-- End your code here  -->
    </section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题在于您正在重新定义卸载功能。实际上，在执行期间仅分配第二功能。尝试使用addEventListener()函数添加它们。

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

Answer 4

尝试在函数中分离代码，并在加载窗口调用所有需要的函数时

＆＃13;

＆＃13;

var directory = [
        {type: "file", name: "file1.txt"},
        {type: "file", name: "file2.txt"},
        {
            type: "directory",
            name: "HTML Files",
            files: [{type: "file", name: "file1.html"}, {type: "file", name: "file2.html"}]
        },
        {type: "file", name: "file3.txt"},
        {
            type: "directory",
            name: "JavaScript Files",
            files: [{type: "file", name: "file1.js"}, {type: "file", name: "file2.js"}, {
                type: "file",
                name: "file3.js"
            }]
        }
    ];
    var fruits = ["Apples", "Oranges", "Pears", "Grapes", "Pineapples", "Mangos"];

    window.onload = function () {
        ulLoad();
        olLoad();

    };
    function ulLoad() {
        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 olLoad() {
        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;
    }

＆＃13;

<section class="main center">
    
            <!-- Start your code here -->
            <h2>HTML Lists</h2>

            <h4>Fruit List</h4>
            <div id="olContainer"></div>
    
            <h4>Directory List</h4>
            <div id="ulContainer"></div>
    
            <!-- End your code here  -->
        </section>

＆＃13;

＆＃13;

＆＃13;

Answer 5

window.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;
};