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

Answer 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();
        }

Answer 2

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]();
}