javascript生成的html表中未定义的#text元素
javascript生成的html表中未定义的#text元素
提问于 2019-05-22 02:03:19
我正在为一个个人网站写一些代码作为一个附带项目。我有一些使用html和javascript的经验，但是遇到了一个我无法识别的奇怪的bug。更具体的背景..。
我有一个XML文件，其中包含一些数据，并希望从javascript中的数据中生成一个HTML表(代码如下所示)。表是按预期(woot)生成的，但就在表的下面，会打印“未定义”一词。我不知道这是从哪里来的，因为我的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>下面是我的问题截图，开发工具打开，这样您就可以更全面地了解这个问题：
感谢能帮我找到这个问题的人！:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-22 02:58:07
啊，小错误。对于变量table_entries，这里没有将其初始化为任何内容：
// generate all the table entries
var table_entries;所以它的初始值是JS未定义的。当您试图连接到这里时：
table_entries+= table_entry;在循环中，它第一次将文字字符串“未定义”与新的第一行连接起来，这将导致实际的文本“未定义”显示和一堆格式错误的HTML。修复应该只是将var table_entries;更改为var table_entries = "";。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56248369
复制相关文章
相似问题
腾讯云开发者
