JavaScript- Uncaught SyntaxError: Unexpected token ) - can't see the extra ')'

Question

I am working on a web application that has been written in Python/ Django. In particular, I have been working on a bug where a 'date' value entered by the user on a form was not being retained (ie if you refreshed the page, the date field would return to the value it held prior to the user changing it).

I have added a JS function to the HTML file for this page to listen out for changes to this value on the form, and to save the new value any time a change is detected.

The function that I have added works- if I enter a new value, and refresh the page, the value that I entered is displayed in the field by default, rather than the original value that it held.

However, when I refresh the page in my browser, the console is showing an error message which says:

(index):3876 Uncaught SyntaxError: Unexpected token )

The only change I've made to my application is adding the following function to the .html file:

$(document).on('change', '#id_date_received', function messageDepositPaid()){
    console.log("document.on('change') called on id_date_received in concept.html ")

    if (window.confirm("Would you like to send an email confirming we have received a deposit?")) {
        console.log("'if(window.confirm)' statement entered in concept.html JS... ")

        var date = $(this).val()
        if (date){
            date = date.split('/')
            var new_date = [];
            new_date = new_date.concat(date[2]).concat(date[1]).concat(date[0]);
            new_date = new_date.join('-');
        }
        if (new_date != $(this).data('original-value')){
            // CDI fee date has been changed from nothing to something
            console.log("It's changed")
            // Set the original-value so it won't send multiple times
            $(this).data('original-value', new_date) //ERF(24/11/2016 @ 1700) This line should be copying the value of new_date to the 'original-value', so original value should now hold the new date...
            //$(this).data('original-value') = new_date

            // Send email to relevant people
            var url="{% url 'comms:open_email_template' project.id %}?template=5"
            console.log('Url', url)
            $.post(url)
                .done(function(response){
                    console.log('Email sent')
                })

            // ERF(28/11/2016 @ 1400) Set value of 'date' to the value of 'new_date':
            date = new_date
        }
    }
    /*} */
    else{
        console.log("'else' of 'if(window.confirm)' statement entered in concept.html JS... ")
        var date = $(this).val()
        if (date){
            date = date.split('/')
            var new_date = [];
            new_date = new_date.concat(date[2]).concat(date[1]).concat(date[0]);
            new_date = new_date.join('-');
            console.log("Value of date in if(date): ", date)
        }
        if (new_date != $(this).data('original-value')){
            //console.log("Value of this.project.date_received: ", this.project.date_received)
            console.log("Value of date: ", date)
            // CDI fee date has been changed from nothing to something
            /*ERF(28/11/2016 @ 0935) Fee date was not necessarily nothing- need to change its value when it had a date
            previously stored in it too...
            Print the values of 'new_date' and 'original-value' here. */
            console.log("Value of new_date: ", new_date)
            console.log("Value of original-value: ", this.data)
            console.log("It's changed")
            // Set the original-value so it won't send multiple times
            $(this).data('original-value', new_date) /*ERF(28/11/2016 @ 0950) This line isn't actually setting the original value to the value of 'new_date'... 
            Set the value of 'id_date_received' to the 'new_date' 
            Need to set the date_received attribute of the project/ presentation object deposit to this too. */
            id_date_received = new_date
            console.log("Value of id_date_received: ", id_date_received)
            date_received = new_date
            console.log("value of date_received: ", date_received)
            // Send email to relevant people
            var url="{% url 'comms:open_email_template' project.id %}?template=5"
            console.log('Url', url)
            $.post(url)
                .done(function(response){
                    console.log('Email sent')
                })

            // ERF(28/11/2016 @ 1400) Set value of 'date' to the value of 'new_date':
            date = new_date
        }
    }
}

As I mentioned, the function works as I had hoped- and when I refresh the page after changing the value of the 'date' field, it now retains the new value that the user has set.

However, for some reason, I'm getting the uncaught syntax error that I mentioned above.

I've re-read through this function several times, but can't spot the offending ) .

Since the page loads, and all of the functions now work correctly, I can't think why I would be getting this syntax error- surely if there actually was a syntax error, the page either wouldn't display correctly, or one of the function calls would break it?

Is it possible that the console is incorrectly displaying this? I don't really want to commit my changes to the live version until I resolve this in case it does actually break something, even though I can't see anything that's not working at the moment...

If I delete the above function from my HTML file, and refresh the page, the console no longer displays this syntax error, but I can't spot anywhere in that function where I have an extra ) , or have one in the wrong place...

Can anyone help me out here? Do I need to refresh my console somehow? I am using Chrome to view the webpage.

Answer 1

You have a syntax error in the 3rd parameter of the on function. It should be a function reference:

$(document).on('change', '#id_date_received', function messageDepositPaid()){
//                                                                         ^ here you close the on

You probably want something like this:

$(document).on('change', '#id_date_received', function() {
    ...
    ...
    ...
});