javascript - javascript 生成的 html 表中的 Ghost undefined #text 元素

Question

我正在为一个个人网站编写一些代码，作为一个副项目。我对 html 和 javascript 有一些经验，但遇到了一个我无法识别的奇怪错误。更具体的上下文...

我有一个包含一些数据的 XML 文件，我想在 javascript 中根据该数据生成一个 HTML 表格(代码如下所示)。该表按预期生成(woot)，但在表的正下方打印了“未定义”一词。我不确定这是从哪里来的，因为我的 javascript 生成的 html 包含在“tbody”标签中。我想这是一些更高级的人可以轻易指出的奇怪的小众错误(我目前对我的 javascript 有点生疏)。

我在将我的问题转换为一组可通过 google 搜索的关键字时遇到了一些麻烦，这就是为什么我认为我会在此处发布有关它的原因。在我决定重构之前，我的表格最初是用 HTML 硬编码的，当所有内容都被硬编码时，我没有遇到这个问题，所以我想它是由我的重构引入的。

我的表格 html 代码...

<h2 class="centered-title">Ability Scores</h2>
<table id="ability_scores"></table>

我用于生成表格的 javascript 代码...

//////////////////////////////////////////////////////////

// Main Functionality

var xhr = new XMLHttpRequest();
xhr.open('GET', '../stats.xml', true);
xhr.timeout = 2000;
xhr.onload = function() { document.getElementById("ability_scores").innerHTML = generate_ability_score_table(this.responseXML); }
xhr.ontimeout = function(e) {};
xhr.send(null);

//////////////////////////////////////////////////////////

// Helper Functions

// GENERATE ABILITY SCORE TABLE FUNCTION
// generates the ability score table html code
// given the xml file with the necessary information
function generate_ability_score_table(xml)
{
    // generate table header
    var table_header = generate_ability_score_table_header();

    // generate all the table entries
    var table_entries;
    var abilities = xml.getElementsByTagName("ability");
    var proficiency = parseFloat(xml.getElementsByTagName("proficiency")[0].childNodes[0].nodeValue);
    for (var i = 0; i < abilities.length; i++)
    {
        var table_entry = generate_ability_score_table_entry(abilities[i], proficiency);
        table_entries+= table_entry;
    }

    return `<tbody>${table_header}${table_entries}</tbody>`;
}

// GENERATE ABILITY SCORE TABLE HEADER FUNCTION
// generates the table header of the ability score table dumbly
function generate_ability_score_table_header()
{
    return "<tr><th>Ability</th><th>Score</th><th>Modifier</th><th>Save</th></tr>";
}

// GENERATE ABILITY SCORE TABLE ENTRY FUNCTION
// generates an entry to the ability score table
// corresponding to the ability passed into the function
function generate_ability_score_table_entry(ability, proficiency)
{
    var name = ability.children[0].childNodes[0].nodeValue;
    var score = parseFloat(ability.children[1].childNodes[0].nodeValue);
    var is_proficient = parseFloat(ability.children[2].childNodes[0].nodeValue);
    var modifier = get_modifier(score); // <-- this function is just a wrapper for a switch statement
    var save = modifier + (is_proficient * proficiency);
    return `<tr><td>${name}</td><td>${score}</td><td>${modifier}</td><td>${save}</td></tr>`;
}

编辑这是相关的xml代码:

<stats>
    <proficiency>3</proficiency>
    <abilityScores>
        <ability>
            <name>Strength</name>
            <score>8</score>
            <proficient>0</proficient>
        </ability>
        <ability>
            <name>Dexterity</name>
            <score>18</score>
            <proficient>1</proficient>
        </ability>
        <ability>
            <name>Constitution</name>
            <score>11</score>
            <proficient>0</proficient>
        </ability>
        <ability>
            <name>Intelligence</name>
            <score>10</score>
            <proficient>0</proficient>
        </ability>
        <ability>
            <name>Wisdom</name>
            <score>12</score>
            <proficient>0</proficient>
        </ability>
        <ability>
            <name>Charisma</name>
            <score>18</score>
            <proficient>1</proficient>
        </ability>
    </abilityScores>
</stats>

这是我在打开开发工具时遇到的问题的屏幕截图，以便您更全面地了解问题:

非常感谢能帮我解决这个问题的人! :)

Answer 1

啊，小错误。对于变量 table_entries，您无需在此处将其初始化为任何内容:

// generate all the table entries
var table_entries;

所以它的初始值是 JS undefined。当您尝试在此处连接时:

table_entries+= table_entry;

在循环中第一次，它将文字字符串“undefined”与能力的新第一行连接起来，这导致显示实际文本“undefined”和一堆格式错误的 HTML。修复应该只是将 var table_entries; 更改为 var table_entries = "";