CODEWITHSUNDEEP
javascript
Code_Vishal
Code_Vishal

Reputation: 127

Getting Parsing Error,Unexpected token in Javascript code

I am creating a budget app with HTML,CSS and Javascript considering the module structure,closures and Immediately Invoked (IIFE) principles. I have divide module structure into UIController ,Appcontroller,BudgetController.

I have a getinput method in UI Controller which returns an object with the input values from front end and i am calling this getinput from app controller.But i am getting error under line getinput method .Is there any syantax error or i am doing something wrong.

enter image description here

enter image description here

Script.js

var budgetController=(function(){
    //some code
})();

/*--------------------------------------------------------------*/

// UI Controller
var UIController=(function(){
    return
    {
        getInput:function(){
            return {
                type: document.querySelector('.add__type').value,
                description: document.querySelector('.add__description').value,
                value: document.querySelector('.add__value').value
            };
        }
    };
})();

/*--------------------------------------------------------------*/

// App controller
var controller=(function(budgetctrl,UIctrl)
{
    var ctrlAddItem=function()
    {
        var result=UIctrl.getInput();
        console.log(result);
        // get the input data

        // add the budget item to budget controller

        // add the item to ui controller

        // calculate the budget

        // display the result 
    }

    // Button click event

    document.querySelector('.add__btn').addEventListener('click',ctrlAddItem);

    //event key event

    document.addEventListener('keypress',function(event)
    {
        if(event.keyCode===13 || event.which ===13)
        {
            ctrlAddItem();
        }
    });
})(budgetController, UIController)

Upvotes: 1

Views: 2157

Answers (1)

Michael Geary
Michael Geary

Reputation: 28850

The problem is here:

return
{

If you move the { up to the same line as the return the syntax error will go away:

return {

The error happens because of automatic semicolon insertion. JavaScript puts a semicolon after the return for you, so the code is effectively:

return;
{

which is definitely not what you wanted.

When you are writing JavaScript code and have to put a { somewhere, always put it on the same line as the statement before, not on a line by itself. I believe this specific problem happens only with return statements, not other statements like if for example, but it's good to be consistent.

For example you don't get the error on these lines:

var controller=(function(budgetctrl,UIctrl)
{
    var ctrlAddItem=function()
    {

But since you have to follow the "brace on same line" style for the return, it's more consistent to do it everywhere (and add a bit more whitespace to improve readability while you're at it):

var controller = (function( budgetctrl, UIctrl ) {
    var ctrlAddItem = function() {

Upvotes: 2

Related Questions