Why does IE give this error: Object doesn't support property or method isNaN

Question

I get this error in IE 11:

Object doesn't support property or method isNaN

JavaScript

jQuery(document).ready(function($) {
    var $total = $('#total'),
    $value = $('.value');
    $firstName = $('#firstname');
    $lastName = $('#lastname');
    $tour = $('#tour');
    $pledge = $('#pledge');
    $currency = $('#currency');
    $distance = $('#distance');
    $riders = $('#riders');

    $(':input').on('input change', function(e) {
        var total = 1;
        $value.each(function(index, elem) {
            if(!Number.isNaN(parseFloat(this.value)))
                total = total * parseFloat(this.value);
        });
        $total.val(total/10);

        $('#pledgefirstname').text($firstName.val());
        $('#pledgelastname').text($lastName.val());
        $('#pledgetour').text($tour.val());
        $('#pledgepledge').text($pledge.val());
        $('#pledgecurrency').text($currency.val());
        $('#pledgecurrency2').text($currency.val());
        $('#pledgecurrency3').text($currency.val());
        $('#pledgecurrency4').text($currency.val());
        $('#pledgetotal').text($total.val());
        $('#pledgetotal2').text($total.val());
        $('#pledgedistance').text($distance.val());
        $('#pledgeriders').text($riders.val());
    });
});

Answer 1

I had a similar problem except it was coming from React after it compiled, bundled, and minified. To solve this, I redefined the Number.isNaN:

if (!Number.isNaN) {
  Object.defineProperty(Number, 'isNaN', {
    value: function(value) {     
      return value !== value;
    }
  });
}

Answer 2

Number.isNaN

This is an experimental technology, part of the Harmony (EcmaScript 6) proposal. Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

It is still not supported by most of the browsers (including IE11).

You should use a standard isNaN method instead:

if (isNaN( parseFloat(this.value) )) { ... }

Answer 3

If you are using ES6 with Babel in React. You can do like this:

// pollyfills for older browsers
// core-js v2.x.x:
import 'core-js/es6/number'; 
// core-js v3.x.x:
import 'core-js/es/number'; 

Add dependencies in package.json for

"dependencies": {
    "core-js": "^2.5.5",
  }