This is another homework assignment I need a little help finishing. What needs to happen is that the JavaScript looks at the headers and creates a list. I have most of it finished. I just need help with a few things. For example: what ID do I put in item "b", as the instructions say Set the value of the "headingText" variable to the content of the element with an ID = to the current value of the counter variable. Does that mean that a acts as a variable without having to be declared with a var? Help is appreciated.
<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>
<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>
Explanations on why I did what I did will be at the bottom
// 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 an HTMLCollection, rather than element, so your use of it to fetch the TOC would only have been workable if you explicitly fetched the first element. (which is why I gave the TOC an identifier)var keyword ought not be used, but it wasn't explained why: When there's no var keyword, JS treats the name as though it belongs to an existing variable (as that's usually when variables without that keyword are used.) As JS walks up the lexical hierarchy, it eventually reaches window, where it'll make a variable by that name if none exists. This isn't a huge issue in this particular case, but if you ever deal with much concurrency (which is very common in JS), for loops could easily start walking all over each-other.for loop exists so that each iteration of the loop is lexically separate from the others, so that TOCEntry variables don't collide. (headingText is a primitive string, and so would be passed by value, thus no risk of collision.) (Additionally, event listeners will now behave more intuitively, instead of all of them referring to the last a value exposed by closure)document.getElementById(a) would fetch whichever one correlated to the iteration in which it was called.Additionally, i is a pseudostandard name for an iterator; it should pretty much always be the first iterator you go to (That is on your teacher though, which is why it isn't on the list.)