Having a formatting issue with the indexLink when populating an unordered list with links. Can't seem to dedent it properly no matter what I try. Here's the javascript snippet:
function addCrumb() {
/* reads from localStorage and determines which links go where */
for (i = hIndexCount; i >= 0; i--) {
if (localStorage.history.charAt(i) === "a") {
ridingHood[i] = '<a href="aboutme.html"><span class="aboutMeLink">About Me</span></a>';
} else if (localStorage.history.charAt(i) === "e") {
ridingHood[i] = '<a href="experiments.html"><span class="experimentsLink">Experiments</span></a>';
} else if (localStorage.history.charAt(i) === "i") {
ridingHood[i] = '<a href="../index.html"><span class="indexLink">Sprit Index</span></a>';
} else if (localStorage.history.charAt(i) === "p") {
ridingHood[i] = '<a href="professional.html"><span class="professionalLink">Professional</span></a>';
} else if (localStorage.history.charAt(i) === "s") {
ridingHood[i] = '<a href="school.html"><span class="schoolLink">School</span></a>';
}
}
//window.alert(ridingHood + " " + h + " " + localStorage.history.length);
displayCrumbs();
}
function displayCrumbs() {
ridingHood[hIndexCount] = '<li><span class="firstLink">' + ridingHood[hIndexCount] + '</span></li>';
ridingHood[hIndexCount - 1] = '<li><span class="secondLink">' + ridingHood[hIndexCount - 1] + '</span></li>';
ridingHood[hIndexCount - 2] = '<li><span class="thirdLink">' + ridingHood[hIndexCount - 2] + '</span></li>';
ridingHood[hIndexCount - 3] = '<li><span class="fourthLink">' + ridingHood[hIndexCount - 3] + '</span></li>';
/* cycles through and displays each ridingHood index */
for (i = hIndexCount; i >= 0; i--) {
document.getElementsByClassName("history")[0].innerHTML += ridingHood[i];
}
}
Here's the HTML snippet:
<nav>
<ul class="history">
</ul>
</nav>
Thank you for your time! Feel free to check out the live example on the student server here!