How to call querySelector for different class?

Question

Need to make a webpart which gets data from API in JSON format. I generate a table from JSON with projects number. Then I change each td to link with class="project_number".

Now each position has it's specific class. No I need each link to direct to project details ot url like: https://XXX.azurewebsites.net/api/protocollines?protocolNo=PR0002

I don't know what parameter should I place in querySelector to have addEventListener for each link.

document.querySelector("???").addEventListener('click', *function*);

  function changeToLink(){
    var tableCells = Array.from(document.getElementsByTagName('td'));
    var i;    
    var proNo = "PR0";
        
     for (i=0; i<tableCells.length; i++ && isContains == true) {
      var proFromArray = tableCells[i].innerHTML;
      var isContains = proFromArray.includes(proNo);    

      if(isContains == true){
        var tdElement = document.getElementsByTagName('td')[i];
        console.log('Profrom: ' + proFromArray);
        tdElement.innerHTML = `<a class="${proFromArray}" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}'>${proFromArray}</a>`
      }
     }
    
  }
 document.querySelector(`??`).addEventListener('click', *function*); 

Answer 1

There's a few ways to do this.

Option 1

You could create the anchor elements using JS, and add the onclick event when you create each one, like:

// inside the if(isContains == true){
var a = document.createElement('a');
a.className = proFromArray;
a.href = `https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}`;
a.textContent = proFromArray;
a.onclick = this.getJsonData;

I created a Fiddle to demonstrate how it works: https://jsfiddle.net/brettnolf/f3xd7ag1/

Option 2

Now, if you need to create it in the form of a string and later call querySelector on what you created, you could add the same class to each anchor tag:

tdElement.innerHTML = `<a class="${proFromArray} pro-elem" href='https://XXX.azurewebsites.net/api/protocollines?protocolNo=${proFromArray}'>${proFromArray}</a>`

Then add the event listener, like:

var pros = document.querySelectorAll('.pro-elem')
for (var i = 0; i < pros.length; i++) {
    pros[i].addEventListener(this.getJsonData);
}

Option 3

If both of those solutions are out of the question, you could use a query selector wildcard and add the event listener similar to the above:

var pros = document.querySelectorAll('[class^=PR0]')
// or if you wanted to be really specific:
// document.querySelectorAll('td a[class^=PR0]')
for (var i = 0; i < pros.length; i++) {
    pros[i].addEventListener(this.getJsonData);
}

You can see this last solution in action if you pull up Chrome dev tools here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll and enter document.querySelectorAll('[class^=title]') in the Console.

Note that the last two options will only work after the elements have been added to the DOM. In the first option, you add the listener when you create the element, so you do it on the fly.