Currently, I am able to pass the .innerTXT of any item I click in my list of items. However, when I click on a nested item like statistics -> tests, I want to display the entire path and not just 'tests'. Can someone assist me in resolving this issue?
Here is what I have done so far, but it displays the entire list instead of just the element that was clicked:
document.getElementById("menu-content").addEventListener("click",function(e) {
const input = event.target as HTMLElement;
console.log(input.nodeName);
if(e.target && input.nodeName == "LI") {
(document.getElementById('txt') as HTMLElement).innerHTML = input.innerText;
}
});
<ul id="menu-content" class="menu-content collapse out">
<li id="node1" ><i class="fa fa-dashboard fa-lg"></i> Dashboard </li>
<li id="node2" data-toggle="collapse" data-target="#statistics" class="collapsed">
<i class="fa fa-area-chart fa-lg"></i> Statistics <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="statistics">
<li id="node21">Tests</li>
<li id="node23">Devices</li>
<li id="node24">Builds</li>
<li id="node25">Services</li>
<li id="node26">Projects</li>
</ul>
<li id="node3" data-toggle="collapse" data-target="#reports" class="collapsed">
<i class="fa fa-file-text fa-lg"></i> Reports <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="reports">
<li>Tests</li>
<li>Devices</li>
<li>Builds</li>
<li>Services</li>
<li>Projects</li>
</ul>
<li id="node4"><i class="fa fa-wrench fa-lg"></i> Configurations </li>
<li id="node5" data-toggle="collapse" data-target="#overview" class="collapsed">
<i class="fa fa-book fa-lg"></i> Overview <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="overview">
<li>Tests</li>
<li>Devices</li>
<li>Builds</li>
<li>Services</li>
<li>Projects</li>
</ul>
</ul>