Passing and returning an object to / from a function in Javascript.

Question

I've done some digging on the above topic but am now more confused than when I started.

I have a unit converter that I'm working on.

It's working fine as a base model but I'm now trying to make it more modular.

There are many units and many conversions.

My plan is to have a function that determines what type of conversion is required, temperature, area etc etc, that can then call the appropriate function to carry out the math.

I'm very new to JS which isn't helping matters as it could be a simple mistake that I'm making but it's just as likely that I'm getting huge errors.

I think the problem is passing the object to the next function and then using it.

I've played with the code a great deal and tried many different suggestions online but still no success.

here is my code:

<script type="text/javascript">

    function Convert(from, to, units, res){

        this.from = from;
        this.to = to;
        this.units = units;
        this.res = res;
    }

    Convert.convertUnits = function(){

        var measurementType = $(".from option:selected").attr("class");
        var result = "invalid input";
        var input = parseInt(this.units.val());

            if(measurementType == "temp"){
                var test = new Convert($("#from"), $("#to"), $("#units"), $("#result"));
                test.convertTemp();
                console.log('Did we get this far?!?!    ::', measurementType);
            }
        console.log('or not????  ::', measurementType);
    }

    Convert.prototype.convertTemp = function(){

        var result = "invalid input";
        var input = parseInt(this.units.val());
        var f = this.from.val();
        var t = this.to.val()

        if(!isNaN(input)) {
            if(f == "degC"){
                if(t == "degF"){
                    result =  input * 1.8 + 32;
                }
                if(t == "kelvin"){
                    result = input + 273.15;
                }
            }
        }
        console.log('Parsed input is', input, "and result is", result);
        this.res.val(result);
        return result;
    }

    //var calcTempTest = new Convert($("#from"), $("#to"), $("#units"), $("#result"));
    //var test = new Convert($("#from"), $("#to"), $("#units"), $("#result"));

    $("#btnConvert").click.convertUnits();

</script>

When you run that code I would expect an error, specifically something about how click has no method 'convertUnits'. What if you define convertUnits as function convertUnits() { /*your function body here*/ } and then assign it as a click handler with $("#btnConvert").click(convertUnits);? — nnnnnn
– nnnnnn, Commented Jul 8, 2013 at 11:22
So what is your output then, and where exactly is there any problem? Please show us what you've tried so far. — Eric
– Eric, Commented Jul 8, 2013 at 11:24
Hi, There is no output so to speak. The log shows what nnnnnn above mentioned, that there is an error "TypeError: 'undefined' is not a function (evaluating '$("#btnConvert").click.convertUnits()')" — null
– null, Commented Jul 8, 2013 at 11:29
@nnnnn I tried your suggestion but still no joy. the console.logs are not being output either which I guess indicates that it's not even getting to the function. — null
– null, Commented Jul 8, 2013 at 11:33

nnnnnn · Accepted Answer · 2013-07-08 11:45:15Z

1

The first obvious problem is this line:

$("#btnConvert").click.convertUnits();

This tries to call a convertUnits() method defined on the click method of the jQuery object returned by $("#btnConvert"). There is no such method, so you get'll get an error about how click has no method 'convertUnits'.

What you want to be doing there is binding the convertUnits() function as a click handler, which you do by passing it to the .click() method as an argument:

$("#btnConvert").click(Convert.convertUnits)

It doesn't make sense to have declared convertUnits() as a property of Convert(), though, so (although it will work as is) I'd change it to just be:

function convertUnits() {
   // your code here
}
$("#btnConvert").click(convertUnits);

The only other thing stopping the code working is that on this line:

var input = parseInt(this.units.val());

...you use this assuming it will be a Convert object with a units property but you haven't yet created a Convert object - you do that inside the if(measurementType == "temp") block with this line:

var test = new Convert($("#from"), $("#to"), $("#units"), $("#result"));

So move that line to the beginning of the function and then use test instead of this:

function convertUnits(){
    var test = new Convert($("#from"), $("#to"), $("#units"), $("#result"));
    var measurementType = $(".from option:selected").attr("class");
    var result = "invalid input";
    var input = parseInt(test.units.val());
    if(measurementType == "temp"){
        test.convertTemp();
        console.log('Did we get this far?!?!    ::', measurementType);
    }
    console.log('or not????  ::', measurementType);
}

Working demo: http://jsfiddle.net/jT2ke/

Some unrelated advice: parseInt() doesn't really make sense for a number to feed into your converter, because the user might want to enter decimal values. You can use parseFloat() instead, or the unary plus operator:

var input = +test.units.val();

But if you want parseInt() it is generally recommended to pass it a second argument to specify the radix:

var input = parseInt(test.units.val(), 10);

...because otherwise if the input text has a leading zero some browsers will assume the value is octal rather than base ten. (parseFloat() and the unary plus don't have that issue.)

edited Jul 8, 2013 at 11:45

answered Jul 8, 2013 at 11:37

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

7 Comments

null Over a year ago

thank you thank you thank you thank you. Also thank you for the explanations.

null Over a year ago

I just saw the additional comment on parseInt, I think that may have just saved me some pain :)

nnnnnn Over a year ago

Yep. Modern browsers don't take a leading zero to mean octal, but do still take a leading "0x" to mean hexadecimal (e.g., parseInt("0x123") returns 291). So the safest thing is just to specify base 10.

null Over a year ago

that's something I would've overlooked, thank you for pointing it out :)

null Over a year ago

The next battle commences :) The measurementType value is not being passed through from option:selected. Battle won:) was looking for a class instead of id

|

Abhilash M A · Accepted Answer · 2013-07-08 11:32:41Z

0

I think you should not implement the method convertUnits inside Convert object. And the new code will look like the following:

convertUnits = function(){

    var measurementType = $(".from option:selected").attr("class");
    var result = "invalid input";
    if(measurementType == "temp"){
        var test = new Convert($("#from"), $("#to"), $("#units"), $("#result"));
        test.convertTemp();
        console.log('Did we get this far?!?!    ::', measurementType);
    }
    console.log('or not????  ::', measurementType);
}

Now you can initiate the convertUnits on the button click:

$("#btnConvert").click(function(){new convertUnits()});

answered Jul 8, 2013 at 11:32

Abhilash M A

5645 silver badges12 bronze badges

Collectives™ on Stack Overflow

Passing and returning an object to / from a function in Javascript.

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related