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

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

我有一个XML文件，其中包含一些数据，并希望从javascript中的数据生成一个HTML表（代码如下所示）。表格按预期生成（woot），但在表格正下方打印“未定义”一词。我不确定这是从哪里来的，因为我的javascript生成的html是用“tbody”标记包装的。我想象这是一个更高级的人很容易指出的奇怪的小漏洞（我现在对javascript有点生疏）

我在将我的问题转换成一组可搜索的关键字时遇到了一些困难，这就是为什么我想在这里发布关于它的内容。在我决定重构之前，我最初用HTML对我的表进行了硬编码，当所有内容都进行了硬编码时，我没有这个问题，所以我想这是由我的重构引入的

我的表格html代码

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

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

// 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>`;
}

能力分数

我的用于生成表的javascript代码

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

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

// 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>`;
}

//////////////////////////////////////////////////////////
//主要功能
var xhr=new XMLHttpRequest（）；
open（'GET'，'../stats.xml'，true）；
xhr.timeout=2000；
xhr.onload=function（）{document.getElementById（“能力分数”）.innerHTML=generate_能力分数_表（this.responseXML）；}
xhr.ontimeout=函数（e）{}；
xhr.send（空）；
//////////////////////////////////////////////////////////
//辅助函数
//生成能力评分表函数
//生成能力分数表html代码
//给定包含必要信息的xml文件
函数生成能力评分表（xml）
{
//生成表头
var table_header=生成_能力_分数_table_header（）；
//生成所有表条目
var表_条目；
var-abilities=xml.getElementsByTagName（“能力”）；
变量熟练程度=parseFloat（xml.getElementsByTagName（“熟练程度”）[0].childNodes[0].nodeValue）；
for（var i=0；ivar modifier=get_modifier（score）；//Ah，这是一个小错误。对于变量
table_条目
，您不会在此处将其初始化为任何内容：

// generate all the table entries
var table_entries;

所以它的初始值是JS未定义。当您尝试在此处连接时：

table_entries+= table_entry;

这是循环中的第一次，它将文字字符串“undefined”与新的第一行连接起来，从而显示实际文本“undefined”和一堆格式错误的HTML。修复方法应该是将
var table_entries；
更改为
var table_entries=“”；
反勾号是用来做什么的？不应该使用任何类型的智能引号。我很惊讶代码竟然会运行。@CharlesEF这是一个模板文字（也称为“模板字符串”）-与ES6一起引入，因此现在大多数浏览器都可以使用。MDN Docs-。Correct@JoshuaT，我的目标是模板文字感谢您的解释。很抱歉，我无法帮助解决实际问题。
生成能力评分表（）中变量
abilites
的内容是什么
，您确定它没有因为XML解析而在数组中拾取额外的未定义变量吗？这解决了我的问题！非常感谢您，有时候愚蠢的简单错误是最难找到的。