I have a code:

var data = $('<span onclick="someFunction(' + element + ');"><a href="#">Element information</a></span>');

where element is a object.

Also, I have a function defined:

someFunction: function(element) {
   console.log(element);
   .... // some code
}

But when span element tries to call that function, I get error:

SyntaxError: missing ] after element list 
someFunction([object Object]);

When I debug it in Firebug, I see

<span onclick="someFunction([object Object]);">
   <a href="#">Element information</a>
</span>

How can I normally call that function with concrete element as an argument?

I have a code:

var data = $('<span onclick="someFunction(' + element + ');"><a href="#">Element information</a></span>');

where element is a object.

Also, I have a function defined:

someFunction: function(element) {
   console.log(element);
   .... // some code
}

But when span element tries to call that function, I get error:

SyntaxError: missing ] after element list 
someFunction([object Object]);

When I debug it in Firebug, I see

<span onclick="someFunction([object Object]);">
   <a href="#">Element information</a>
</span>

How can I normally call that function with concrete element as an argument?

• javascript
• jquery
• syntax-error
• inline

• 1 what type of object is element? – ankur Commented Dec 12, 2012 at 6:54

3 Answers 3

You will not be able to pass the element as it is converted to string in your concatenation. When an object is converted to string it outputs: [Object object]. This is what you are seeing in your debug.

My suggestion: You may add the element as data to the span like:

$('span).data('element', element);

And in someFunction retrieve it like:

var element = $(this).data('element');

Another option is to bind to click in Javascript at the place where your element is initialized. Like this

function anotherFunction() {
  var element = {};

  // Initialize element
  ...

  // I have already got the element initialized, now I can bind the click
  $('span').click(function() {
    // For your debug and validation
    console.log(JSON.stringify(element));
  });
}

If you try to build some DOM elements with jQuery, you should do this:

// Wrong: $('<span onclick="someFunction(' + element + ');"><a href="#">Element information</a></span>');
// Right: build up the element step by step
var data = $('<span/>')
           .append(
               // build up the child <a> element here
               $('<a href="#"/>')
               .text("Element information")
               //.attr('href',"#") Don't really need this
           )
           .click(
               // Here is a real inline function
               function(){
                   someFunction(element);
               }
           );

Note: .click in jQuery can be used to assign an event handler for the Click event.

In your original code, you are trying to concatenate a string with an object, which will result in applying toString to that object, converting it to a string:

console.log((new Object()).toString()); // [object Object]
console.log("blah" + (new Object())); // blah[object Object]

In your code, it seems that your object is in fact a jQuery object, but it won't make any differences.

So the resulting "code" used to form onclick is invalid:

someFunction([object Object]);

[ and ] is used to construct an Array in JavaScript, like [1, 2] is an Array with two elements. However [object Object] is an invalid JavaScript syntax so you get the error.

Anyway, this is not a correct way to build up DOM element with events, even with jQuery. The above shown the correct way.

You could also try:

var data = $('<span onclick="someFunction(' + JSON.stringify(element) + ');"><a href="#">Element information</a></span>');

The function:

someFunction: function(element) { console.log(element); .... // some code }

Should return a JSON Object when called.