javascript - Passing variable in onclick: Uncaught SyntaxError: Unexpected indentifier - Stack Overflow

admin管理员组

文章数量:1314584

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 unment 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');

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 unment 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');

• javascript
• json

Share Improve this question Follow asked Sep 29, 2013 at 21:39 Bob HornBob Horn 34.3k3636 gold badges120120 silver badges235235 bronze badges 1

• 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 Commented Sep 29, 2013 at 21:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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);
            }
        })
    );
});

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.

本文标签： javascriptPassing variable in onclick Uncaught SyntaxError Unexpected indentifierStack Overflow