getElementById('variableName') 循环中断

Question

/*
 * Helper Functions
 */
function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

/*
 * Create div(s) from Object with style properties
 */
Layer.prototype.createEl = function(object, target, className) {
    count = 1;
    for(e in object) {
        var newElement = document.createElement("div")
        newElement.id = e;
        setAttributes(newElement, { 
          "class" : className, 
          "data-name" : e, 
          "data-order" :  count
        });

        for(x in object[e]) {
            newElement.style[x] = object[e][x];
        }

        target.appendChild(newElement);
        count++;
    }
}


if (typeof authorized !== "undefined" && app.identify()) 
{
    app.createEl(app.identify().containers, document.body, "layerFrame");
    for(e in app.identify().containers) {
        app.createEl(app.identify().framing, document.getElementById(e), "framework");
    }
}

app.identify() 返回一个 JSON 对象。 .containers 部分如下所示：

"containers" : {
    "master" : {
        "position" : "fixed",
        "width" : "150px",
        "height" : "200px",
        "bottom" : "0px",
        "right" : "100px",
        "background" : "yellow"
    },
    "response" : {
        "display" : "none",
        "position" : "fixed",
        "width" : "150px",
        "height" : "200px",
        "bottom" : "0px",
        "right" : "100px",
        "background" : "teal"
    }
},

中断的区域是我调用 app.createEl 函数的最后第三行代码。特别是 getElementById(e) 部分。

如果我 console.log 'e'，它会按预期返回“master”和“response”。

如果我在 document.getElementById("master") 而不是 document.getElementById(e) 中硬编码，一切都会按我的意愿进行。

但是当我使用 'e' 运行它时，我得到“Uncaught TypeError: Cannot call method 'appendChild' of null”

typeof(e) = 一个字符串，为什么在我使用 getElementById(e) 时会中断？

回答

不确定这是否与任何人有关，但问题在于调用函数 createEl（对象，目标，类名） 并直接为目标参数传入 document.getElementById() 。我所做的只是将 document.getElementById() 分配给一个变量，然后调用 createEl() 并将该变量传递给目标参数：

for(e in app.identify().containers) 
{
    tmp = document.getElementById(e);
    app.createEl(app.identify().framing, tmp, "framework");
}

Answer 1

好吧，伙计，我创建了一个 FIDDLE 来模拟您所说的内容，但 document.getElementById(e) 在这里运行良好。

如果你向我们展示什么是“app.identify().framing”，我可以尝试模拟你在做什么。

编辑：

在你展示了什么是框架之后，我更新了我的FIDDLE，它仍然运行良好。可能您的 app.identity() 不是您期望的 Javascript 对象。

var json =  {
    "containers" : {
        "master" : {
            "position" : "fixed",
            "width" : "150px",
            "height" : "200px",
            "bottom" : "0px",
            "right" : "100px",
            "background" : "yellow"
        },
        "response" : {
            "display" : "none",
            "position" : "fixed",
            "width" : "150px",
            "height" : "200px",
            "bottom" : "0px",
            "right" : "100px",
            "background" : "teal"
        }
    },
    "framing" : {
        "header" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "pink",
            "display" : "none"
        },
        "contentTop" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "purple"
        },
        "contentBottom" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "green"
        },
        "footer" : {
            "width" : "150px",
            "height" : "100px",
            "background" : "blue"
        }
    }
};

function setAttributes(el, attrs) {
  for(var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

var createEl = function(object, target, className) {
    count = 1;
    for(e in object) {
        var newElement = document.createElement("div")
        newElement.id = e;
        setAttributes(newElement, { 
          "class" : className, 
          "data-name" : e, 
          "data-order" :  count
        });

        for(x in object[e]) {
            newElement.style[x] = object[e][x];
        }

        target.appendChild(newElement);
        count++;
    }
}

createEl(json.containers, document.body, "layerFrame");
for(e in json.containers) {
    createEl(json.framing, document.getElementById(e), "framework");
}