Question

我正在研究嵌套数组。当我尝试使用appendChild向div插入数据时，它会抛出一个错误，指出无法读取属性＆quot; appendChild＆＃39;为null

我的代码会听到

<script>
    var emp1 = [];
    emp1["Emsno"] = 10001;
    emp1["name"] = "jack";
    emp1 ["sall"] = 5000;

    var emp2 = [];
    emp2["Emsno"] = 10002;
    emp2["name"] = "Reck";
    emp2 ["sall"] = 5500;

    var emp3 = [];
    emp3["Emsno"] = 10003;
    emp3["name"] = "lama";
    emp3 ["sall"] = 5300;

    var emp4 = [];
    emp4["Emsno"] = 10004;
    emp4["name"] = "sam";
    emp4 ["sall"] = 6000;

    var emps = [emp1, emp2, emp3, emp4];

    var Employedisplay = document.getElementById("Employedisplay");

    function showEmployes(){
        var n = emps.length;

        for (i = 0; i < n ; i++){
            var emp = emps[i];

             for(var key in emp){

                var NewDiv = document.createElement("div");

                NewDiv.innerHTML = key + ": " + emp[key];

                Employedisplay.appendChild(NewDiv);

             }
             var NewBrk = document.createElement("br")
             Employedisplay.appendChild(NewBrk);
        }
    }
</script>
</head>
<body>
<input type = "button" id = "MyArray"  value ="Show Emps" onclick="showEmployes()"/>
<hr>
<div id="Employedisplay"></div>
</body>

它正在以这种方式工作

function showEmployes(){
        var n = emps.length;

        for (i = 0; i < n ; i++){
            var emp = emps[i];

             for(var key in emp){

                var NewDiv = document.createElement("div");

                NewDiv.innerHTML = key + ": " + emp[key];

                document.getElementById("Employedisplay").appendChild(NewDiv);

             }
             var NewBrk = document.createElement("br")
             Employedisplay.appendChild(NewBrk);
        }
    }

我不知道我的第一种方法在哪里出错了？

Answer 1

即使在浏览器在DOM中添加#Employedisplay元素之前，也会执行以下代码行。

var Employedisplay = document.getElementById("Employedisplay");

因此，当您点击该按钮时，Employedisplay变量为null

最好在页面加载时引导你的代码，或者你可以在showEmployee方法的开头获得#Employedisplay元素。

<script>
    var emp1 = [];
    emp1["Emsno"] = 10001;
    emp1["name"] = "jack";
    emp1["sall"] = 5000;

    var emp2 = [];
    emp2["Emsno"] = 10002;
    emp2["name"] = "Reck";
    emp2["sall"] = 5500;

    var emp3 = [];
    emp3["Emsno"] = 10003;
    emp3["name"] = "lama";
    emp3["sall"] = 5300;

    var emp4 = [];
    emp4["Emsno"] = 10004;
    emp4["name"] = "sam";
    emp4["sall"] = 6000;

    var emps = [emp1, emp2, emp3, emp4];

    function bootstrap() {
        var Employedisplay = document.getElementById("Employedisplay");
    }

    function showEmployes() {
        var n = emps.length;

        for (i = 0; i < n; i++) {
            var emp = emps[i];

            for (var key in emp) {

                var NewDiv = document.createElement("div");

                NewDiv.innerHTML = key + ": " + emp[key];

                Employedisplay.appendChild(NewDiv);

            }
            var NewBrk = document.createElement("br")
            Employedisplay.appendChild(NewBrk);
        }
    }
</script>
</head>

<body onload="bootstrap();">
    <input type="button" id="MyArray" value="Show Emps" onclick="showEmployes()" />
    <hr>
    <div id="Employedisplay"></div>
</body>

Answer 2

<script>
    var emp1 = [];
    emp1["Emsno"] = 10001;
    emp1["name"] = "jack";
    emp1 ["sall"] = 5000;

    var emp2 = [];
    emp2["Emsno"] = 10002;
    emp2["name"] = "Reck";
    emp2 ["sall"] = 5500;

    var emp3 = [];
    emp3["Emsno"] = 10003;
    emp3["name"] = "lama";
    emp3 ["sall"] = 5300;

    var emp4 = [];
    emp4["Emsno"] = 10004;
    emp4["name"] = "sam";
    emp4 ["sall"] = 6000;

    var emps = [emp1, emp2, emp3, emp4];



    function showEmployes(){
    var Employedisplay = document.getElementById("Employedisplay");
        var n = emps.length;

        for (i = 0; i < n ; i++){
            var emp = emps[i];

             for(var key in emp){

                var NewDiv = document.createElement("div");

                NewDiv.innerHTML = key + ": " + emp[key];

                Employedisplay.appendChild(NewDiv);

             }
             var NewBrk = document.createElement("br")
             Employedisplay.appendChild(NewBrk);
        }
    }
</script>
</head>
<body>
<input type = "button" id = "MyArray"  value ="Show Emps" onclick="showEmployes()"/>
<hr>
<div id="Employedisplay"></div>
</body>

appendchild不工作

2 个答案: