How to write a correct querySelector-CodePudding

My full js

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');
  }
});

}

This is the html I want to write in queryselector

<div >   
   <a (click)="jump('labeled')">Labeled</a>
   <a (click)="jump('grey')">Labeled</a>
</div>

And below is the wrong selector i wrote :

var indicator = document.querySelector(".indexing a[(click)=jump("   sectionId   ")] ");

Labeled is the sectionId

CodePudding user response：

You could try using escape characters in order to select an attribute name with parentheses.

document.querySelector(".indexing a[\\(click\\)=\"jump('"   sectionId   "')\"]");