javascript functions do not work

Question

Hi I have an abject called calc. And inside this I have several functions including init. I have three buttons which I am appending to the div using jquery. So when user clicks any button it will trigger inputs function and after some if else statement based on these conditions it will call one of the rest of the three functions which are calculate, reset and emailtofriend. The problem is the it does not invoke other functions except the input function. Why it behaves like this and how to make it work?

Here is my code

js

var jQuery, container, output,
    calc = {
        init: function () {
            container = $('.calculate');

            $(document).on('click','.userButtons',calc.input);

            calc.widgetDesign(container);
        },
        widgetDesign: function (container) { 
            var widgetContainer = $('<div />').addClass('calculateContainer'),
                form             = $('<div />'),
                buttons         = $('<div />');

            buttons.append('<button rel="reset" class="userButtons">Reset</button><button rel="emailtofriend" class="userButtons">Email to a friend</button>');

            form.append('<div class="label">Weight (kg):</div>');
            form.append('<input type="text" name="weight" class="weight inputs" />');
            form.append('<div class="label">Height (cm):</div>');
            form.append('<input type="text" name="height" class="height inputs" />');
            form.append('<div><button rel="calculate" class="userButtons calcButton">Calculate</button></div>');

            widgetContainer.append(form);

            widgetContainer.append(buttons);

            widgetContainer.appendTo(container);
        },
        input: function () {
            var button = $(this).attr('rel');

            if ( button == 'calculate' ) {
                console.log(button);
                calc.calculate;
            } else if (button == 'reset') {
                console.log(button);
                calc.reset;
            } else if (button == 'emailtofriend') {
                console.log(button);
                calc.emailtofriend;
            }
        },
        calculate: function () {
            console.log('hello');
        },
        reset: function () {
            alert('reset');
        },
        emailtofriend: function () {
            alert('emailtofriend');
        }
    };
    calc.init();

here is jsfiddle

Bergi · Accepted Answer · 2012-09-29 10:25:11Z

1

You will need to invoke the functions, not just select them :-)

        if ( button == 'calculate' ) {
            console.log(button);
            calc.calculate();
        //                ^^
        } else if (button == 'reset') {
            console.log(button);
            calc.reset();
        //            ^^
        } else if (button == 'emailtofriend') {
            console.log(button);
            calc.emailtofriend();
        //                    ^^
        }

Btw: This can be written much shorter by using the bracket notation as a member operator:

if (button in calc) {
     console.log(button);
     calc[button]();
}

answered Sep 29, 2012 at 10:25

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

Nelson Benítez León · Accepted Answer · 2012-09-29 10:25:16Z

1

You should put parens at the end of function names () , like so:

       if ( button == 'calculate' ) {
            console.log(button);
            calc.calculate();
        } else if (button == 'reset') {
            console.log(button);
            calc.reset();
        } else if (button == 'emailtofriend') {
            console.log(button);
            calc.emailtofriend();
        }

answered Sep 29, 2012 at 10:25

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Collectives™ on Stack Overflow

javascript functions do not work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related