undefined / NaN error in output

Question

This is my first post on stackoverflow, i am encountering error in the following code , no error shows in inspect element / JS console in firefox but for some reason the ouput after calculation is displaying undefined / NaN error . The input from user is parsed in Float.

code:

function costtoShip(){

    // get input 

    var weight = parseFloat(document.getElementById("weight")).value ;
    var msg;
    var cost;
    var subtotal;

    // calculation

    if ( weight >= 0.00 && weight <= 150.00 ) {
        cost = 20.00;
    }

    else if ( weight >= 151.00 && weight <= 300.00 ) {
        cost = 15.00;
    }

    else if ( weight >= 301.00 && weight <= 400.00 ) {
        cost = 10.00;
    }    


   subtotal = weight * cost ;
   msg = "<div> Total Weight is " + weight + "</div>" ;
   msg = msg + "<div> Subtotal is " + subtotal + "</div>" ;


   // send output

    document.getElementById("results").innerHTML = msg ;
}

just as a sidenote. Why do you say less or equal to 150 and in the next condition you say greater or equal to 151? You miss some values. Can I suggest you to use greater than 150 in the second condition? And greater than 300 on the second? this way you can use your code also if the value is between 150 and 151 — Lelio Faieta, Oct 16 '15 at 19:01
you're right, i did miss that but the specifications expect the user to enter Int and output in float — Prabh Rai, Oct 16 '15 at 19:10
Another side note: it makes no sense to add zeroes after the decimal in your code `0.00 === 0` — Jonathan, Oct 21 '15 at 19:37
And another: `cost` doesn't have a default value and your code has some scenarios where it will remain undefined at the time you are multiplying it. — Jonathan, Oct 21 '15 at 19:42
Last one: "specifications expect ... output in float" - That code will not output a float if the result is a whole number. — Jonathan, Oct 21 '15 at 19:48

score 7 · Accepted Answer · answered Oct 16 '15 at 18:57

var weight = parseFloat(document.getElementById("weight")).value;

This is not how to parseFloat. You're trying to call a value property on a double. Move your parenthesis out.

var weight = parseFloat(document.getElementById("weight").value);

I suggest using console.log(weight); or other values around your code so you can easier pin point these issues.

score 4 · Answer 2 · answered Oct 16 '15 at 18:58

4

parseFloat(document.getElementById("weight")).value

should be

parseFloat(document.getElementById("weight").value)

With practice, you'll develop an eye for things like this. Until then, sprinkle your code with alert() statements to dig into this sort of thing. Just remember to take them out when you're done. Remember that doing math on NaN isn't an error, hence no error message.

answered Oct 16 '15 at 18:58

dspeyer

2,904
1
18
24

1

sprinkle it with console.log(); statements. Alerts are super annoying and you can un-comment out console.log() statements in prototypes/production to help debug if needed. ;-) – Chris L Oct 16 '15 at 19:00

score 3 · Answer 3 · answered Oct 16 '15 at 18:58

3

You closed the brackets on the first line of your code too early. It's probably supposed to be like this:

var weight = parseFloat(document.getElementById("weight").value);

Javascript is not able to parse a DOM element to float. ;)

answered Oct 16 '15 at 18:58

sfandler

610
5
23

score 1 · Answer 4 · answered Oct 16 '15 at 18:59

1

If weight value doesn't meet any of the specified conditions then cost variable will not be initialized and any calculation using undefined will result in undefined.

answered Oct 16 '15 at 18:59

JsingH

189
7

undefined / NaN error in output

4 Answers4