生成 Table 的内容时出错

Question

这是另一项家庭作业，我需要一些帮助才能完成。需要发生的是 JavaScript 查看 headers 并创建一个列表。我已经完成了大部分。我只需要一些帮助。例如：我在项目 "b" 中放入什么 ID，如说明中所说 Set the value of the "headingText" variable to the content of the element with an ID = to the current value of the counter variable。这是否意味着 a 充当变量而无需使用 var 声明？感谢帮助。

HTML

<article>
 <h2>United States Bill Of Rights</h2>
 <h3>Table Of Contents</h3>
 <ul>
 <!-- The Table Of Contents will appear here. -->
 </ul>

 <h3 id="1">Amendment I</h3>
 <p>Congress shall...</p>
 <h3 id="2">Amendment II</h3>
 <p>A well regulated Militia...</p>
 <h3 id="3">Amendment III</h3>
 <p>No Soldier shall...</p>
 <h3 id="4">Amendment IV</h3>
 <p>The right of the people...</p>
 <h3 id="5">Amendment V</h3>
 <p>No person shall be held...</p>
 <h3 id="6">Amendment VI</h3>
 <p>In all criminal prosecutions...</p>
 <h3 id="7">Amendment VII</h3>
 <p>In Suits at common law...</p>
 <h3 id="8">Amendment VIII</h3>
 <p>Excessive bail shall...</p>
 <h3 id="9">Amendment IX</h3>
 <p>The enumeration in the Constitution...</p>
 <h3 id="10">Amendment X</h3>
 <p>The powers not delegated to the...</p>
</article>

JavaScript

<script type="text/javascript">
 var TOCEntry = "";

 // References the only "<ul>" in the document.
 var list = document.getElementsByTagName ("ul");

 var headingText= "";

 var TOCEntry = "";

 function createTOC () {
  // a. This counter will = "1", and will repeat the loop as long as the value is LTG "10", and will increment the counter variable by "1" each time through.
  for (a = 1; a <= 10; a++) {

   // Within the "for" loop, add statements that do the following:

   // b. Set the value of the "headingText" variable to the content of the element with an ID = to the current value of the counter variable ("a").
   document.getElementById ("___").innerHTML = headingText;

   // c. Create a new <li> element and assign it as the value of the "TOCEntry" variable.
   var TOCEntry = document.createElement ("li");
   document.body.appendChild (TOCEntry);

   // d. Set the content of the "TOCEntry" Node to the following: "<a href=#" + i ">" + headingText + "</a>".
   var TOCEntry = document.getElementsByTagName ("li").textContent = "";

   // e. Add the "TOCEntry" Node as the last child to the list Node.

  }

 }

 // Backwards-compatibility event listener
 if (window.addEventListener) {
  window.addEventListener ("load", createTOC, false);
 }
 else if (window.attachEvent) {
  window.attachEvent ("onload", createTOC);
 }
</script>

Answer 1

关于我为什么这样做的解释将在底部

// References the only "<ul>" in the document.
var list = document.getElementById("tableOfContents");
function createTOC () {
  // a. This counter will = "1", and will repeat the loop as long as the value is LTG "10", and will increment the counter variable by "1" each time through.
  for (var a = 1; a <= 10; a++) {
    (function(a) {
    // Within the "for" loop, add statements that do the following:
    // b. Set the value of the "headingText" variable to the content of the element with an ID = to the current value of the counter variable ("a").
    var headingText = document.getElementById(a).innerHTML;
   // c. Create a new <li> element and assign it as the value of the "TOCEntry" variable.
    var TOCEntry = document.createElement ("li");

   // d. Set the content of the "TOCEntry" Node to the following: "<a href=#" + i ">" + headingText + "</a>".
    TOCEntry.innerHTML = "<a href=\"#" + a + "\">" + headingText + "</a>";
    // e. Add the "TOCEntry" Node as the last child to the list Node.
    list.appendChild (TOCEntry);
  })(a);
 }
}
// Backwards-compatibility event listener
if (window.addEventListener) {
 window.addEventListener ("load", createTOC, false);
}
else if (window.attachEvent) {
 window.attachEvent ("onload", createTOC);
}

<article>
 <h2>United States Bill Of Rights</h2>
 <h3>Table Of Contents</h3>
 <ul id="tableOfContents">
 <!-- The Table Of Contents will appear here. -->
 </ul>

 <h3 id="1">Amendment I</h3>
 <p>Congress shall...</p>
 <h3 id="2">Amendment II</h3>
 <p>A well regulated Militia...</p>
 <h3 id="3">Amendment III</h3>
 <p>No Soldier shall...</p>
 <h3 id="4">Amendment IV</h3>
 <p>The right of the people...</p>
 <h3 id="5">Amendment V</h3>
 <p>No person shall be held...</p>
 <h3 id="6">Amendment VI</h3>
 <p>In all criminal prosecutions...</p>
 <h3 id="7">Amendment VII</h3>
 <p>In Suits at common law...</p>
 <h3 id="8">Amendment VIII</h3>
 <p>Excessive bail shall...</p>
 <h3 id="9">Amendment IX</h3>
 <p>The enumeration in the Constitution...</p>
 <h3 id="10">Amendment X</h3>
 <p>The powers not delegated to the...</p>
</article>

[getElementsByTagName][1] returns 一个 HTMLCollection，而不是元素，因此使用它来获取目录只有在明确获取第一个元素时才可行。（这就是为什么我给 TOC 一个标识符）
在评论中提到不应该使用没有 var 关键字的 for 循环，但没有解释原因：当没有 var 关键字时，JS 将名称视为属于现有变量（因为通常使用不带该关键字的变量。）当 JS 沿着词法层次结构向上移动时，它最终到达 window，如果 none 存在，它将使用该名称创建一个变量。在这种特殊情况下这不是一个大问题，但是如果你曾经处理过很多并发（这在 JS 中很常见），for 循环很容易开始遍历 each-other.
for 循环中存在立即调用的匿名函数，因此循环的每次迭代在词法上都与其他迭代分开，因此 TOCEntry 变量不会发生冲突。（headingText 是一个原始字符串，因此将按值传递，因此没有冲突的风险。）（此外，事件侦听器现在的行为将更加直观，而不是所有它们都引用最后公开的 a 值关闭）
标题的 ID 是连续的，您的循环会循环遍历它们，因此 document.getElementById(a) 将获取与调用它的迭代相关的任何一个。

此外，i 是迭代器的伪标准名称；它应该几乎总是你去的第一个迭代器（虽然这是在你的老师身上，这就是它不在列表中的原因。）

生成 Table 的内容时出错

Errors in generating a Table Of Contents

javascript

appendchild

nodes

getelementsbytagname

HTML

JavaScript