onClick, variables and strings

Question

I'm trying to call a function when the user clicks on a link.

$('#'+fieldId).append('<div class="div-table-td-artists"><a href="#" onclick=addArtistToSpreadsheet("'+similarArtist+'")>'+similarArtist+'</a></div>');

gives

Uncaught SyntaxError: Invalid or unexpected token

$('#'+fieldId).append('<div class="div-table-td-artists"><a href="#" onclick=addArtistToSpreadsheet(\""'+similarArtist+'\"")>'+similarArtist+'</a></div>');

gives

Uncaught SyntaxError: missing ) after argument list

I don't understand what's going on. similarArtist is a string (I even tried to add .toString() to it to be sure).

And the version below does work.

$('#'+fieldId).append('<div class="div-table-td-artists"><a href="#" onclick=addArtistToSpreadsheet("dummy test")>'+similarArtist+'</a></div>');

Thanks for your help.

Could you tell us some more about what you're trying to do? Is +similarArtist+ supposed to be a variable that links to the name of an artist? — Thaeke Hekkenberg
– Thaeke Hekkenberg, Commented Aug 20, 2020 at 10:48

Greg-- · Accepted Answer · 2020-08-20 10:48:42Z

You need escape quotes like $('#'+fieldId).append('<div class="div-table-td-artists"><a href="#" onclick="addArtistToSpreadsheet(\''+similarArtist+'\')">'+similarArtist+'</a></div>');

Or better use template litterals

const fieldId = 'testid'
let similarArtist = 'Some artist'
let similarArtist2 = 'Some artist2'

// Working example
$('#'+fieldId).append('<div class="div-table-td-artists"><a href="#" onclick="addArtistToSpreadsheet(\''+similarArtist+'\')">'+similarArtist+'</a></div>');


// Better way template literals
$('#'+fieldId).append(
`
<div class="div-table-td-artists">
    <a href="#" onclick="addArtistToSpreadsheet('${similarArtist2}')">${similarArtist2}</a>
</div>
`
);

function addArtistToSpreadsheet(artist){
  console.log(artist)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="testid"></div>

Ryan · Accepted Answer · 2020-08-20 11:34:51Z

To try and summarise and walk you through this issue for you:

It's all in this little segment of code. Notice how when you've seperated it out you can see the issue with the colouring immediately on stackoverflow.

onclick=addArtistToSpreadsheet(\""'+similarArtist+'\"")>

You've forgotten to open and close your onclick event for starters. So modify like so:

onclick="addArtistToSpreadsheet(\""'+similarArtist+'\"")">

Though there's now an issue of the second quatation mark is going to be expected to close the onclick event, so you switch to using ' / apostrophe instead.

onclick="addArtistToSpreadsheet(\'''+similarArtist+'\'')">

Then there's the issue of you simply having too many apostrophes now, so remove one set like so and you're good to go.

onclick="addArtistToSpreadsheet(\''+similarArtist+'\')">

You were pretty close to the solution, just a few minor mistakes. See this working below:

const fieldId = 'Test'
var similarArtist = 'Example'

//Working example
$('#'+fieldId).append('<div class="div-table-td-artists"><a href="#" onclick="addArtistToSpreadsheet(\''+similarArtist+'\')">'+similarArtist+'</a></div>');

function addArtistToSpreadsheet(artist){
  console.log(artist)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Test"></div>

Sascha A. · Accepted Answer · 2020-08-20 10:48:13Z

0

let fieldId = 'myId';
let similarArtist = 'My_Artist';
let string = '<div class="div-table-td-artists"><a href="#" onclick=addArtistToSpreadsheet("'+similarArtist+'")>'+similarArtist+'</a></div>';
$('#'+fieldId).append(string);

function addArtistToSpreadsheet(artist) {
console.log(artist);
}
The suppose the variable similarArtist seems to have in it's an space inside than I get this error without I didn't get any error.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='myId'></div>

answered Aug 20, 2020 at 10:48

Sascha A.

4,6463 gold badges17 silver badges34 bronze badges

Collectives™ on Stack Overflow

onClick, variables and strings

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related