即使声明了变量，也出现未定义的错误

Question

我正在尝试创建一张存储所有信息的卡片。 但是，在我创建变量并尝试将 append 文本写入它之后，我得到了一个未定义的错误。 我应该改变什么？

这是错误：

Uncaught TypeError: title is undefined createCards http://localhost/Projects/diary/:86 createCards http://localhost/Projects/diary/:75 success http://localhost/Projects/diary/:103 jQuery 6 http:/ /localhost/Projects/diary/:96 jQuery 13 diary:86:13 createCards http://localhost/Projects/diary/:86 forEach self-hosted:206 createCards http://localhost/Projects/diary/:75 success http ://localhost/Projects/diary/:103 jQuery 6 http://localhost/Projects/diary/:96 jQuery 13

function cardClass(status) {
    let defaultClass = ["card", "mb-3", "h-100", "text-center", "mw-25"]
    switch (status) {
        case 0:
            return defaultClass.concat(["border-danger"]); break;  // coming soon
        
        case 1:
            return defaultClass.concat(["border-warning"]); break;  // developing
    
        case 2:
            return defaultClass.concat(["border-success"]); break;  // success

        case 3:
            return defaultClass.concat(["border-info"]); break;  // improving (beta)

        case 4:
            return defaultClass.concat(["border-danger"]); break;  // testing
        
        default:
            return defaultClass.concat(["border-info"]); break;  // unknown
    }
}

function createCards(data) {
    data.forEach(obj => {
        const titleClass = ["card-header", "text-primary", "fw-bold"];
        const card_class = cardClass(obj.status);

        let col = document.createElement("div").classList.add("col");
        let card = document.createElement("div").classList.add(...card_class);
        let title = document.createElement("div").classList.add(...titleClass);
        let body = document.createElement("div").classList.add("card-body");
        let text = document.createElement("p").classList.add("card-text");

        // Append text
        title.innerText = obj.title; // This line is causing the error

        // // Append elements
        // body.appendChild(text); card.appendChild(title); card.appendChild(body)
        // col.appendChild(card);
        // document.getElementById("features").appendChild(col);   
        
    })
}
$("#features").ready(() => {
    $.ajax({
        type: "POST",
        url: 'functions/getData.php',
        data: { get: "features" },
        success: function (data) {
            checkJson = JSON.parse(data);
            if (checkJson){
                createCards(checkJson);
            }
        },
        error: function (xhr, opt, err) {
            console.warn(xhr, opt, err)
        }
    })
})

我确定我声明了变量，但它引发了错误。 任何帮助都提前感谢！

Answer 1

document.createElement("div").classList.add("test")不会返回您的元素，它会返回未定义的 add 方法的结果。

你需要这样的东西。

let title = document.createElement("div");
title.classList.add(...titleClass);
...
title.innerText = obj.title;

此时您的所有变量（col、card、title、body、text）实际上都是未定义的。

Answer 2

您可以在MDN中看到classList.add()返回undefined 。

你可能打算做的是

let title = document.createElement("div"); // `title` is now a `DocumentElement`
title.classList.add(...titleClass); // Returns `undefined`, but we ignore the return value
title.innerText = obj.title; // This should work now, since title is no longer `undefined`