jQuery returns NaN on simple calculation

Question

I have the following script. When I initially wrote it, it worked perfectly. Then I loaded the page over and it has broken and permanently is returning NaN. I am able to run it successfully in the console but for some reason it will not work properly on the site. It is operating inside of a rails application.

$(document).ready(function(){
  $('select').click(function(){
    var often = parseInt($('#biohaz_frequency_often').val());
    var time = parseInt($('#biohaz_frequency_time').val());
    var timeoften = often * time
    if(timeoften == 0){
      var freq = 0;
    }
    else if(timeoften <= 2){
      var freq = 1;
    }
    else if(timeoften <= 4){
      var freq = 3;
    }
    else if(timeoften <= 9){
      var freq = 6;
    }
    else if(timeoften > 9){
      var freq = 10;
    }
    var sever = parseInt($('#biohaz_risk_severity').val());
    var master = parseInt($('#biohaz_risk_mastery').val());
    $('#risk_frequency').html(freq);
    $('#risk_total').html(freq * sever * master);
  })
})

Can you create a jsFiddle or provide the HTML that this goes with? — j08691, Oct 17 '12 at 20:55
There is a missing semicolon after `var timeoften = often * time`. — ngmir, Oct 17 '12 at 20:57

Beetroot-Beetroot · Accepted Answer · 2012-10-17T22:03:06.580

Run this diagnostic:

$(document).ready(function(){
  $('select').click(function(){
    var often = parseInt($('#biohaz_frequency_often').val());
    var time = parseInt($('#biohaz_frequency_time').val());
    var sever = parseInt($('#biohaz_risk_severity').val());
    var master = parseInt($('#biohaz_risk_mastery').val());
    alert([often, time, sever, master].join());
  });
});

This will tell you which of the four vars is NaN.

Also (and this may be significant), $('select').click(...) is rather unusual. I would expect to see $('select').on('change', ...). With click your NaN is more likely the result of a non numeric working its way onto the calculation. I can't tell for certain without seeing the HTML.

Best strategy is to ensure that all four select elements is initialised (in HTML) with a valid option selected, then code as follows :

$(document).ready(function(){
    //cache of static jQuery objects
    var $$ = {
        'often':     $('#biohaz_frequency_often'),
        'time':      $('#biohaz_frequency_time'),
        'sever':     $('#biohaz_risk_severity'),
        'master':    $('#biohaz_risk_mastery'),
        'frequency': $('#risk_frequency'),
        'total':     $('#risk_total')
    };
    $('select').on('change', function(){
        var often = parseInt($$.often.val()),
            time = parseInt($$.time.val()),
            sever = parseInt($$.sever.val()),
            master = parseInt($$.master.val()),
            ot = often * time,//keep this member name short, it's about to be used 4 times in the next line
            freq = (ot == 0) ? 0 : (ot <= 2) ? 1 : (ot <= 4) ? 3 : (ot <= 9) ? 6 : 10;
        $$.frequency.html(freq);
        $$.total.html(freq * sever * master);
    }).trigger('change');//call the handler immediately, with initially selected options
});

I ran that diagnostic and they all returned at 0,0,0,0. I am going to try and follow your advise on using on('change') I am very new and this looks like a much better method. I really appreciate the help. First time asking a question on here. Its paid off. — capcode01, Oct 18 '12 at 11:56
No worries, the pleasure's all mine. You should see a button or link against my answer that allows you to accept it ... which is a good thing. — Beetroot-Beetroot, Oct 18 '12 at 16:58

darth_phoenixx · Answer 2 · 2012-10-17T21:49:38.967

0

I've just put together a quick example jsfiddle for you based on benny's answer and the deleted answer that was here a second ago - it seems to work:

http://jsfiddle.net/Qr5eF/1/

If you could provide your own html that would help guide you to an answer.

edit: updated to new jsfiddle as I mistyped two ids in the original. Oops!

edited Oct 17 '12 at 21:49

answered Oct 17 '12 at 21:09

darth_phoenixx

932
12
23

to be honest, I wouldn't be surprised if this is caused by a typo on the line `var master = parseInt($('#biohaz_risk_mastery').val());` - should `#biohaz_risk_mastery` be `#biohaz_risk_master`? – darth_phoenixx Oct 17 '12 at 21:51

jQuery returns NaN on simple calculation

2 Answers2