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 函数的最后一行代码的第 3 行。特别是getElementById（e）部分。

如果我控制台.log"e"，它会按预期返回"主"和"响应"。

如果我在document.getElementById（"master"）而不是document.getElementById（e）中硬编码，一切都可以按照我想要的方式工作。

但是当我用"e"运行它时，我得到"未捕获的类型错误：无法调用 null 的方法'appendChild' "

typeof（e） = 一个字符串，为什么当我使用 getElementById（e） 时它会中断？

答

不确定这是否与任何人相关，但问题是调用该函数createEl（object， target， className）并直接传入 document.getElementById（） 作为目标参数。我所做的只是将document.getElementById（）分配给一个变量，然后称为createEl（）并将该变量传递给目标参数：

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

Answer 1

好吧，伙计，我已经创建了一个模拟你所说的小提琴，但是document.getElementById（e）在这里运行良好。

如果你向我们展示什么是"app.identify（）.frameming"，我可以尝试模拟你在做什么。

编辑：

在你展示了什么是框架之后，我已经更新了我的小提琴，它仍然运行良好。可能，你的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");
}