Sorry, I got confused
I meant in populateSideBar
The code breaks down when I try to edit this part. I think I am doing it incorrectly, the other part works fine.
I am supposed to just edit this part, arent I 
That looks like you didn’t update the populateSideBar code from two of my earlier posts. Especially the selected part in your screenshot was the place where the code was incorrectly adding the sidebar <li> to somewhere other than the sidebar.
The populateSideBar code (without the console.logs) should at this point be this:
<script>
// Populate the sidebar with <li> elements
function populateSidebar() {
const sidebarList = document.getElementById("sidebar-list");
const headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
// Duplicate the header structure in the sidebar as a nested <ul> list
let currentList = sidebarList;
let previousLevel = 1;
function addHeader(header) {
if (!currentList) {
return;
}
const level = parseInt(header.tagName[1]);
const listItem = document.createElement("li");
const link = document.createElement("a");
link.textContent = header.textContent;
// If the header doesn't have an id, assign it the text content
if (!header.id) {
header.id = header.textContent;
}
link.href = "#" + header.id;
listItem.appendChild(link);
if (level > previousLevel) {
const newList = document.createElement("ul");
currentList.appendChild(newList);
currentList = newList;
} else if (level < previousLevel && currentList.id !== "sidebar-list") {
for (let i = 0; i < previousLevel - level; i++) {
// We want to get currentList.parentElement.parentElement but not go beyond the top level
// which is sideBarList
currentList = currentList.parentElement
if (currentList.id !== "sidebar-list") {
currentList = currentList.parentElement
}
}
}
currentList?.appendChild(listItem);
previousLevel = level;
}
headers.forEach(addHeader);
}
populateSidebar();
</script>
Ah my bad 
How stupid of me
Just a recap
I added a testing header before the h2 and it works fine on the left
After adding AFTER one of the h2 headers, like so:
The headers are thrown to the very top right outside of the sidebar, despite the fix.
Console doesnt show any errors. I have noticed that the < li > of the new header is added after the class=content container and not before like with the rist of the < li > and < ul > of the other headers. (but I think you already know that : P)
Yeah, that’s the bug. In populateSideBar the currentList variable is intended to be changed to a different <ul> depending on the heading’s level (is it h1, h2, h3, etc).
- The specific code that re-assigns the
currentListvariable iscurrentList = currentList.parentElement. .parentElementgets the immediate parent of the element, For example, calling.parentElementon a<li>element in the sidebar would return the<ul>it’s a part of.- For the
<ul class="sidebar-list">element, theparentElementis the<div class="content-container">element. Somehow, the code is callingcurrentList.parentElementon that top level<ul>when the checks I added should be preventing that.- Those checks should be present in your code are the highlighted parts here:
So, what you should try to debug with some console.log calls added to the code is what are the conditions under which currentList is being re-assigned to point to the <div class="content-container"> element. If the specific conditions can be identified, some more if conditions can be added to avoid them.
I don’t know how that works… 
I mean I already thought you did that with the edited code.
I don’t know what to type and where to type or how to call it. This is all I am seeing in the console…
I did this
Sorry I just noticed that you gave the new code without the console logs I still had to edit it into it.
It still shows me the same stuff when I type the same console logs into Console.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.