Passing variable in onclick: Uncaught SyntaxError: Unexpected indentifier

Question

I'm trying to pass an object to a function in the onclick event. If I run the code below, I get Uncaught SyntaxError: Unexpected indentifier. If I uncomment the JSON.stringify line, and use taskAsJson in place of task, I get the same error.

$.each(tasks, function (index, task) {
    //var taskAsJson = JSON.stringify(task);
    items.push('<li><a href="#" onclick="showTask(' + task + ');">' + task.Description + '</a></li>');
});

However, if I hard-code a value, like 5, it works and 5 gets passed to the function.

$.each(tasks, function (index, task) {
    items.push('<li><a href="#" onclick="showTask(' + 5 + ');">' + task.Description + '</a></li>');
});

Why do I get that error when I try to pass my object? What do I need to change in order to be able to pass task or taskAsJson?

Note: items is an array that gets used to update a div and listview:

$('#appTasks').append(items).listview('refresh');

Did you actually use taskAsJson in your code? When you write '...' + task + '...', i.e. performing string concatenation, then the object task will be converted to a string. The default string representation of an object is [object Object], which in your case leads to the string <a href="#" onclick="showTask([object Object]);">. This doesn't look like proper JS, does it? — Felix Kling
– Felix Kling, Commented Sep 29, 2013 at 21:47

Ry- · Accepted Answer · 2013-09-29 22:42:50Z

7

JavaScript in HTML is bad. HTML in JavaScript is bad. JavaScript in HTML in JavaScript? You get problems like these.

Make the element the right way.

var items = $.map(tasks, function(task) {
    return $('<li>').append(
        $('<a>', {
            href: '#',
            text: task.Description,
            click: function(e) {
                e.preventDefault();
                showTask(task);
            }
        })
    );
});

edited Sep 29, 2013 at 22:42

answered Sep 29, 2013 at 21:42

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

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

3 Comments

Bob Horn Over a year ago

+1 for the tips. I tried this and now each <li> in my listview is blank. And when showTask() receives a task, task.Description shows as undefined. I'm trying to work through it...

Ry- Over a year ago

@BobHorn: My bad — got the argument order to $.map backwards :) It should be fixed now.

Bob Horn Over a year ago

I was just about to edit your answer because I found that same issue here: api.jquery.com/jQuery.map. Thanks!

David · Accepted Answer · 2013-09-29 22:17:59Z

3

The issue is that showTask(' + task + '); lacks quotes inside the JavaScript code. For example, if task would be "cars" the HTML created will be onclick="showTask(cars)". Now "cars" lacks quotes. In addition, in your example task probably isn't even a string but an object, so you are looking for something like task.id to get the right parameter. Otherwise task's string representation will be [object Object].

It works when you hardcode 5 because 5 is a number value that does not require quotes. (onclick="showTask(5)" is valid)

So if you change it to showTask(\'' + task + '\'); it should work because the escaped \' will be ' in the final HTML code leading to onclick="showTask('valueOfTask')" (at least if task is the string you want in the parameter). But, as minitech pointed out, it's generally bad to put JS code in HTML.

answered Sep 29, 2013 at 22:17

David

1218 bronze badges

1 Comment

Bob Horn Over a year ago

+1 for the tip. Thank you. Couldn't get it to work, so I'm trying the other answer at the moment.

Collectives™ on Stack Overflow

Passing variable in onclick: Uncaught SyntaxError: Unexpected indentifier

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related