JavaScript I can't send string parameter to function even I can send int parameter with div.innerHTML on click event

Question

script type="text/javascript"> 
function QueryAgain(teammate){
document.getElementById("researcher-name").value=teammate;
document.getElementById("publication-name").value="";
document.getElementById("publication-year").value="";

}
function createDiv() { 
const boxes = document.querySelectorAll('.cards');
boxes.forEach(box => {
  box.remove();
});

for(var i=0;i<size;i++){
let div = document.createElement('div');
div.innerText = document.getElementById('getText').innerText;
div.id="card"+i;
div.innerHTML="<br />"+"<br />"+"<br />"+"<br />"+"RESEARCHER ID:"+researcher_id[i]+"<br />"+"RESEARCHER NAME:"+researcher_name[i]+"<br />"+"RESEARCHER SURNAME:"+researcher_surname[i]+"<br />"+"RESEARCHER PUBLICATON NAME:"+publication_name_general[i]+"<br />"+"RESEARCHER PUBLICATON YEAR:"+publication_year_general[i]+"<br />"+"RESEARCHER PUBLICATON PLACE:"+publication_place_general[i]+"<br />"+"RESEARCHER PUBLICATON TYPE:"+publication_type_general[i]+"<br />"+"RESEARCHER TEAMMATES NAME:"+"<br />"+"<br />"+"<br />"+"<br />"+"<br />"

for(var j=0;j<researcher_teammate[i].length;j++){
  holder=teammate_id_general[i][j];
  holder2=researcher_teammate[i][j];
  console.log(holder2);
  console.log(typeof(holder2));
  div.innerHTML+="<br />"+"<a href='#nav'id='teammate'"+'onclick=QueryAgain(\''+holder+'\')'+">"+researcher_teammate[i][j]+"</a>"+"<br />";
}
div.className="cards";                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
div.style.height="300px";
div.style.border="4px solid black";
div.style.background="#E2EFF3";
div.style.display= "flex";
div.style.alignItems="center";
div.style.justifyContent="center";
div.style.marginLeft="400px";
div.style.marginRight="400px";
div.style.marginTop="50px";
document.body.appendChild(div);
console.log(researcher_teammate_name);


}
const countAll = document.querySelectorAll('.cards').length;
console.log("COUNT ALL:",countAll);
function getIdFormA(obj) {
  window.alert(window.location.href += "?id=" + obj);
}


}
</script>

Here is my some part of my code and I am trying to send a string parameter to this QueryAgain() the function below:

function QueryAgain(teammate){
document.getElementById("researcher-name").value=teammate;
document.getElementById("publication-name").value="";
document.getElementById("publication-year").value="";
}

I am sending parameter with this code below:

for(var j=0;j<researcher_teammate[i].length;j++){
  holder=teammate_id_general[i][j];
  holder2=researcher_teammate[i][j];
  div.innerHTML+="<br />"+"<a href='#nav'id='teammate'"+'onclick=QueryAgain(\''+holder2+'\')'+">"+researcher_teammate[i][j]+"</a>"+"<br />";
}

holder variable is an integer value,I can send it to QueryAgain() funciton and it writes the value.When I am trying to send holder2 (which is string variable),it gives me this error below

Uncaught SyntaxError: Invalid or unexpected token (at (index):1:12)

I just want to send this two variable to funciton but I can't even send the string parameter.So I guess I need to learn how to send it.I am doing a Syntax error I guess but I couldn't understand the reason and can't fix it. Here are some codes which I try and didn't work:

I have tried this once:

div.innerHTML+="<br />"+"<a href='#nav'id='teammate'"+'onclick=QueryAgain('+holder2+')'+">"+researcher_teammate[i][j]+"</a>"+"<br />";

And looked for questions on here and found some codes-->This code has taken by this questeion

div.innerHTML+="<br />"+"<a href='#nav'id='teammate'"+'onclick=QueryAgain(\''+holder2+'\')'+">"+researcher_teammate[i] 
[j]+"</a>"+"<br />";

And this code didn't solve the error.What is the reason of error and how can I solve it? I am trying send integer(holder) and string(holder2) value to funciton same time.

Answer 1

Just use a string template literal

div.innerHTML += `
  <br />
  <a 
    href='#nav'
    id='teammate'
    onclick="QueryAgain('${holder}')">
    ${researcher_teammate[i][j]}
  </a>
  <br />
`;