passing arguments from one function to another in javascript

Question

I have date value

  for(i=0;i<data['before'].length;i++) {
        var day = data['before'][i];               
        var dte = new Date(day);

I am trying to display the dates as a link in a div dynamically from java script. On clicking the link I am passing dte as object to date_click function.

$('#before_dates').append('<tr><td><a onclick="date_click('+dte+');" href="javascript:void(0)">'+dte.toDateString()+'</a></td></tr>');

On clicking the link the

function date_click(date){
    alert("Hi..."+dte);
}

I am getting following error:

Error: SyntaxError: missing ) after argument list
Source Code: date_click(Fri Aug 31 2012 00:00:00 GMT+0100 (IST));

I know its small error, but I could not figure a way to do that. Any help would be great.

Thank You

I guess you will have to wrap your date in doublequotes: date_click('" + dte + "') — Cyclonecode
– Cyclonecode, Commented Aug 27, 2012 at 11:02
+1 @KristerAndersson it should look like alert("Hi..." + dte + ""); and date_click('" + dte + "') — user1317647
– user1317647, Commented Aug 27, 2012 at 11:04

Alnitak · Accepted Answer · 2012-08-27 13:00:57Z

1

When you write:

'...date_click('+dte+')';

what you actually get is:

'...date_click(' + dte.toString() + ')';

i.e.:

date_click(Fri Aug 31 2012 00:00:00 GMT+0100 (IST))

which is clearly not valid JS, hence the reported error.

You appear to be trying to pass the actual dte variable, and not its string representation. For that to work you would just write date_click(dte) without any quote marks but this would only work if dte is a global variable (and those are bad!).

However you have jQuery, so don't use DOM0 "inline" event handlers when you can use proper DOM3 ones. They cause quoting problems (as you have here) and also don't work unless the specified function is in the "global" scope.

Based on the updated question, use data() to bind the current object to the event handler.

function date_click(ev) {
    ev.preventDefault();
    var date = $(this).data('date');
    alert("Hi..." + date);
}

for (i = 0; i < data['before'].length; ++i) {
    var day = data['before'][i];  
    var dte = new Date(day);
    var $a = $('<a>', { text: dte.toDateString() }).data('date', dte);
    var $tr = $('<tr>').appendTo('#before_dates');
    var $td = $('<td>').appendTo($tr).append($a);
}

$('#before_dates').on('click', 'a', date_click);  // use event delegation

Note that this is quite verbose, now, but it's a clean way to build the required DOM elements.

edited Aug 27, 2012 at 13:00

answered Aug 27, 2012 at 11:04

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

3 Comments

user1529342 Over a year ago

Hi there i tried your answer but its giving me a particular date even though i click on different dates..

Alnitak Over a year ago

OK, but your question didn't show multiple dates. Please update it to show how different date objects are supposed to result in different function calls.

user1529342 Over a year ago

Hi Alnitak i hava updated it ... I am using a loop to do that

Alnitak · Accepted Answer · 2012-08-27 11:09:39Z

1

You are missing the quotes (hence that syntax error)

append('<tr><td><a onclick="date_click(\''+dte+'\');" href="javascript:void(0)">' ...)

Please follow what @Alnitak says, its a clean way of doing things.

edited Aug 27, 2012 at 11:09

Alnitak

341k72 gold badges420 silver badges503 bronze badges

answered Aug 27, 2012 at 11:04

UltraInstinct

44.6k12 gold badges85 silver badges108 bronze badges

1 Comment

Alnitak Over a year ago

actually, I don't think that's what he wanted. I think he wanted to pass dte as a parameter, and not the value of dte

Esailija · Accepted Answer · 2012-08-27 11:04:53Z

0

Attach the event dynamically with jQuery:

var row = $('<tr><td><a href="#">' + dte.toDateString() + '</a></td><td>');

$('#before_dates').append( row );

row.find("a").click( function(e) {
    e.preventDefault();
    alert('Hi...' + dte);

});

That way you don't have to mess with various levels of interpretation of your string, it's much simpler this way.

answered Aug 27, 2012 at 11:04

Esailija

140k24 gold badges280 silver badges328 bronze badges

2 Comments

Amith George Over a year ago

Wouldn't it be better to instead read the date string from the clicked element as opposed to reading it from the captured variable? If by some DOM manipulation, the date stored as the text of the <a> tag is modified, the click handler will still output the old date.

Alnitak Over a year ago

@AmithGeorge it rather looks like the OP is really trying to pass the actual date object, and not its string representation.

Collectives™ on Stack Overflow

passing arguments from one function to another in javascript

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related