javascript - HTML 修改 JavaScript 代码表示我的 HTML 元素未定义

Question

我目前正在尝试让一个简单的类别系统发挥作用。为此，我创建了一个适合我的需求的小型类别“类”:

var categories = [];
function Category (id, name, ownedBy){
    this.id = id;
    this.name = name;
    this.ownedBy = ownedBy;
    categories[id] = this;
}

id 是类别的 ID。它的名称仅用于显示目的。 “ownedBy”是父类(super class)别的 ID，如果没有，则为“none”。

填充类别数组后，我对其进行迭代并调用我的函数将类别添加到我的 HTML 代码中:

function addHTMLCategory(catID){
    var cat = categories[catID]; //Get the Category-"Object"
    if(!cat) return;             //If it doesn't exist, do nothing.

    if(cat.ownedBy != "none"){   //If the category has a supercategory,
        addHTMLCategory(cat.ownedBy); //Add it to the HTML first.
    }
    if(document.getElementById("cat"+catID)) return; //And if it already exists, dont add it again.

    //ERROR-PART: If a category has a superclass, get the superclass element.
    var contentElement = document.getElementById(cat.ownedBy=="none"?"categories":"cat"+cat.ownedBy);
    var li = document.createElement("div");
    li.id = "cat"+catID;
    li.className = "category";
    li.innerText = cat.name;
    contentElement.appendChild(li);
}

初始 HTML:

<div id="categories"></div>

此函数检查类别是否有 super 类别，如果有，它首先添加此 super 类别:我这样做是为了避免应添加类别的元素不存在。

不幸的是，这种情况确实发生了:当一个类别有一个父类(super class)别时，“contentElement”变量为空。谁能告诉我为什么？

Answer 1

问题是类别的ownedBy变量被设置为 super 类别的名称，而不是它的ID(在我认为不相关的代码的另一部分)