生成目录时出错

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关键字的for循环，但没有解释原因：当没有var关键字时，JS将名称视为属于现有变量（如这通常是在使用没有该关键字的变量时。）随着 JS 在词法层次结构中向上移动，它最终到达window，如果不存在，它将使用该名称创建一个变量。在这种特殊情况下，这不是一个大问题，但如果您曾经处理过大量并发（这在 JS 中很常见），for 循环很容易开始相互遍历。
• 存在for 循环中立即调用的匿名函数，因此循环的每次迭代都在词法上与其他迭代分开，因此TOCEntry 变量不会发生冲突。 （headingText 是一个原始字符串，因此将按值传递，因此没有冲突的风险。）（此外，事件侦听器现在将表现得更加直观，而不是所有事件侦听器都引用闭包暴露的最后一个 a 值）
• 标题的 ID 是连续的，因此您的循环会循环遍历它们，因此 document.getElementById(a) 将获取与调用它的迭代相关的任何一个。

另外，i 是迭代器的伪标准名称；它几乎应该始终是您访问的第一个迭代器（不过那是在您的老师身上，这就是它不在列表中的原因。）