HTML linting error (',' expected javascript), but following the suggestion breaks the code

Question

I'm making a small flask app (and am VERY new to html) and have a linting error that's confusing me. In my html file I have this:

<button onclick="copyText('{{ results['s'] }}')">Copy to clipboard</button> 

<script>
    function copyText(txt) {
        // copy txt into clipboard 
        // put txt in format '{{ TXT }}' if you want the value of the variable not a string literal
        navigator.clipboard.writeText(txt);
    }
</script>

The line '{{ results['s'] }}' is underlined with red and vscode says "',' expected javascript" twice, right before s and right after s. (Meaning to get rid of the error I have to write '{{ results[',s,'] }}').

I tried adding in the commas which fixed the linting error but that broke my code and the button didn't work when I ran the flask app. I also tried adding <!-- vscode-disable-next-line --> right before the button line (as suggested by chatGPT) but that didn't make a difference for the linting error.

Really I'd just like to know why the error is there and how to get rid of it.

Answer 1

I think you should use `` instead of ''. Try this:

<button onclick="copyText(`{{ results['s'] }}`)">Copy to clipboard</button>

<script>
  function copyText(txt) {
    // copy txt into clipboard
    // put txt in format '{{ TXT }}' if you want the value of the variable not a string literal
    navigator.clipboard.writeText(txt);
  }
</script>