Search code examples
javascripthtmlwebtemplate-literals

How can I pass in dynamic arguments with template literals?

I have some very simple code


function createAnswerElement(answer, index) {
  const key = `${answer}-${index}`;

  return `
    <p class="delete" onclick=someSillyFunc(${key})>x</p>
    `;
}

function someSillyFunc(key) {
  console.log(key);
}

The "p tag" gets appended to a div. If I click on the "p tag" with either no parameters or with hardcoded parameters it works just fine. The issue is when I try and use template literals to dynamically pass the variable key to the function. After doing this I constantly get an error in the console "Uncaught SyntaxError: missing ) after argument list."

I have tried wrapping the key variable in quotes and all sorts of other things but cannot get this to work. What am I missing?

Solution

  • You forgot to wrap function around " " in onclick

    return `
    <p class="delete" onclick="someSillyFunc(${key})">x</p>
    `;