HTML

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是迭代器的伪标题名称;它应该几乎总是你去的第一个迭代器（这是在你的老师身上，这就是为什么它不在列表中。）

生成目录时的错误

HTML

的JavaScript

1 个答案: