Check out my JavaScript code snippet:
navHighlighter() {
const sections = document.querySelectorAll("section[id]");
let scrollY = window.pageYOffset;
sections.forEach(current => {
const sectionHeight = current.clientHeight;
const sectionTop = (current.getBoundingClientRect().top + window.pageYOffset) - 50;
var sectionId = current.getAttribute("id");
var indicator = document.querySelector(".indexing a[(click)=jump(" + sectionId + ")] ");
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
indicator?.classList.add('active');
} else {
indicator?.classList.remove('active');
}
});
}
Below is the HTML I want to target using querySelector:
<div class="indexing">
<a (click)="jump('labeled')">Labeled</a>
<a (click)="jump('grey')">Grey</a>
</div>
However, my selector seems to be incorrect:
var indicator = document.querySelector(".indexing a[(click)=jump(" + sectionId + ")] ");
Labeled is the specific sectionId I am trying to target.