CODEWITHSUNDEEP
javascriptstringonclick
Genepi Games
Genepi Games

Reputation: 65

onClick, variables and strings

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.

Upvotes: 1

Views: 702

Answers (3)

Ryan
Ryan

Reputation: 65

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>

Upvotes: 2

Greg--
Greg--

Reputation: 636

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>

Upvotes: 3

Sascha A.
Sascha A.

Reputation: 4616

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>

Upvotes: 0

Related Questions