生成目录中的错误

Question

这是另一项作业，我需要一些帮助来完成。需要发生的是，JavaScript查看头部并创建一个列表。我大部分都完成了。我只是需要一些帮助。例如:我在"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]返回一个HTMLCollection，而不是元素，所以只有显式地获取第一个元素，才能使用它来获取TOC。(这就是为什么我给了TOC一个标识符)
• 注释中提到，不应该使用不带var关键字的循环，但没有解释为什么:当没有var关键字时，JS将名称视为属于现有变量(通常是在使用没有该关键字的变量时)。当JS沿着词法层次结构前进时，它最终会到达window，如果不存在，它将使用该名称创建一个变量。在这种情况下，这不是一个大问题，但是如果您曾经处理过许多并发性(在JS中非常常见)，for循环可以很容易地开始相互遍历。
• for循环中立即调用的匿名函数存在，因此循环的每一次迭代在词汇上都与其他迭代分离，因此TOCEntry变量不会发生冲突。(headingText是一个基本字符串，因此将通过值传递，因此不存在冲突的风险。)(此外，事件侦听器现在的行为将更加直观，而不是引用闭包公开的最后一个a值)
• 标题的it是顺序的，这样您的循环就可以遍历它们，因此document.getElementById(a)将获取与调用它的迭代相关的任何一个。

此外，i是迭代器的伪标准名称；它应该始终是您访问的第一个迭代器(虽然在您的老师上，这就是为什么它不在列表中)。