Question

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

我有一个包含一些数据的XML文件，并希望使用javascript（如下代码）从该数据生成HTML表。该表已按预期方式生成（闪烁），但在该表的正下方显示了“ undefined”一词。我不确定这可能来自哪里，因为我的JavaScript生成的HTML包裹在“ tbody”标签中。我在想这是一个奇怪的小众漏洞，更高级的人可以轻松指出（我目前对我的JavaScript有点生锈）。

将我的问题转换为一组可谷歌搜索的关键字时遇到了一些麻烦，这就是为什么我认为我会在此处发布有关它的原因。在决定进行重构之前，我最初是用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 = "";

javascript生成的html表中的Ghost未定义#text元素

1 个答案: