"Uncaught SyntaxError: Unexpected end of input" with onclick

Question

I have an issue with onclick function.

Here's my code :

$('ul.listing').append('<button onclick="openInApp("test")"  class="btn btn-primary">Edit <i class="fa fa-external-link" aria-hidden="true"></i></button>');

When I click the button, I have the "Unexpected end of input" error message. I try to pass variable too like this :

$('ul.listing').append('<button onclick="openInApp('+ edit_url +')"  class="btn btn-primary">Edit <i class="fa fa-external-link" aria-hidden="true"></i></button>');

And I get the following message : Uncaught SyntaxError: missing ) after argument list

Both errors begins at the "("

I have another function (always in the append) :

 $('ul.listing').append('<a href="event-details.html" onclick="saveEventID(' + data[i].ID + ');">')

And it works perfectlly

I don't understand

Since you used onclick="openInApp("test")", only "openInApp(" is passed to the onclick listener — Luca Kiebel
– Luca Kiebel, Commented May 14, 2018 at 17:52
Your problem is conflicting quotes, try to avoid using attribute event handlers, these are just one of several issues that come up when using them. — Musa
– Musa, Commented May 14, 2018 at 17:54
I know that the probleme is the quotes but how to solve it ? I try to inverse double quote and quote, to remove it, etc but still the same problem. Also why the other function worked ? — Jean R.
– Jean R., Commented May 14, 2018 at 17:59
You can escape the quotes with a backspace, or use a string template, or you can bind the event handler to the element as a non-inline binding. There are various ways to approach this issue. — Taplar
– Taplar, Commented May 14, 2018 at 18:02
Just don't use inline event attributes at all. Bind the function using jQuery on. — Bergi
– Bergi, Commented May 14, 2018 at 18:07

S. Dev · Accepted Answer · 2018-05-14 18:05:39Z

5

To nest the string in the onclick, you can do it like below where the single quote is escaped using a backslash to prevent it from terminating the string.

$('ul.listing').append('<button onclick="openInApp(\'test\')"  class="btn btn-primary">Edit <i class="fa fa-external-link" aria-hidden="true"></i></button>');

An alternative way to handle this can be done by passing the string through a separate data attribute:

$('ul.listing').append('<button onclick="openInApp(this)" data-string="yourstringhere" class="btn btn-primary">Edit <i class="fa fa-external-link" aria-hidden="true"></i></button>');

and then accessing it in the onclick function like this:

function openInApp(element) {
    var mystring = $(element).data("string");
}

answered May 14, 2018 at 18:05

S. Dev

6195 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

"Uncaught SyntaxError: Unexpected end of input" with onclick

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related