Betfair like Odds increment and decrement

Question

Please help me it is very irritating. Don't know why my logic is failed every time. I am trying to make Betfair like odds increment in my web project. Betfair have it's own price group which can be found here

LINK: https://api.developer.betfair.com/services/webapps/docs/display/1smk3cen4v3lu3yomq5qye0ni/Betfair+Price+Increments

Here is explanation: if odds is 1.01 and some body want to increase that odds via html5 number spinner the increment will be 0.01 and if odds is 2 the increment will be 0.02. whole increment list is available in that link. working example can be found in betfair's betslip.

here is my Javascript:

function getIncremantal(fval) {
    var val = parseFloat(fval);
    var step;
    if (val <= 1.99) {
        step = 0.01;
    } else if (val > 2 && val < 3) {
        step = 0.02;
    } else if (val > 3 && val < 4) {
        step = 0.05;
    } else if (val > 4 && val < 6) {
        step = 0.1;
    } else if (val > 6 && val < 10) {
        step = 0.2;
    } else if (val > 10 && val < 19.5) {
        step = 0.5;
    } else if (val >= 20 && val < 30) {
        step = 1;
    } else if (val >= 30 && val < 50) {
        step = 2;
    } else if (val >= 50 && val < 100) {
        step = 5;
    } else if (val >= 100 && val < 1000) {
        step = 10;
    } else if (val > 1000) {
        step = null;
    }
    return step;
}

Update: jsFiddle http://jsfiddle.net/71fs0a67/1/

Answer 1

I tried the following which is not using number stepping, but if you use the buttons it does work. It is an alternate solution, sorry if its not what you are looking for.

HTML:

<input type="number" min="1.01" max="1000" id="num"/>
<button class="increment">+</button>
<button class="decrement">-</button>

Javascript:

$('.increment').on('click', function() {
    var elem = $('#num');
    var value = parseFloat(elem.val());
    var result = +(value + getIncremantal(value)).toFixed(2);
    elem.val(result);
});

$('.decrement').on('click', function() {
    var elem = $('#num');
    var value = parseFloat(elem.val());
    var result = +(value - getDecremantal(value)).toFixed(2);
    elem.val(result);
});

function getIncremantal(val) {
    var step;
    if (val < 2) {
        step = 0.01;
    } else if (val >= 2 && val < 3) {
        step = 0.02;
    } else if (val >= 3 && val < 4) {
        step = 0.05;
    } else if (val >= 4 && val < 6) {
        step = 0.1;
    } else if (val >= 6 && val < 10) {
        step = 0.2;
    } else if (val >= 10 && val < 20) {
        step = 0.5;
    } else if (val >= 20 && val < 30) {
        step = 1;
    } else if (val >= 30 && val < 50) {
        step = 2;
    } else if (val >= 50 && val < 100) {
        step = 5;
    } else if (val >= 100 && val < 1000) {
        step = 10;
    } else if (val > 1000) {
        step = null;
    }
    return step;
}

function getDecremantal(val) {
    var step;
    if (val <= 2) {
        step = 0.01;
    } else if (val > 2 && val <= 3) {
        step = 0.02;
    } else if (val > 3 && val <= 4) {
        step = 0.05;
    } else if (val > 4 && val <= 6) {
        step = 0.1;
    } else if (val > 6 && val <= 10) {
        step = 0.2;
    } else if (val > 10 && val <= 20) {
        step = 0.5;
    } else if (val > 20 && val <= 30) {
        step = 1;
    } else if (val > 30 && val <= 50) {
        step = 2;
    } else if (val > 50 && val <= 100) {
        step = 5;
    } else if (val > 100 && val <= 1000) {
        step = 10;
    } else if (val > 1000) {
        step = null;
    }
    return step;
}

http://jsfiddle.net/71fs0a67/7/

With jquery ui spinner, you can do something like this:

$( "#spinner" ).spinner({
    min: 1.01,
    max: 1000,
    step: 0.01,
    spin: function( event, ui ) {
        event.preventDefault();
        event.stopPropagation();
        var value = this.value || ui.value;
        value = parseFloat(value);
        var step;
        if ($(event.currentTarget).hasClass('ui-spinner-up')) {
            step = getIncremantal(value);
            value = +(value + step).toFixed(2);
            $( "#spinner" ).spinner('value', value);
        } else {
            step = getDecremantal(value);
            value = +(value - step).toFixed(2);
            $( "#spinner" ).spinner('value', value);
        }
    }
});

http://jsfiddle.net/71fs0a67/9/

Answer 2

Try this:

function getIncremantal(fval) {
    var val = parseFloat(fval);
    var step;
    if (val < 2) {
        step = 0.01;
    } else if (val >= 2 && val < 3) {
        step = 0.02;
    } else if (val >= 3 && val < 4) {
        step = 0.05;
    } else if (val >= 4 && val < 6) {
        step = 0.1;
    } else if (val >= 6 && val < 10) {
        step = 0.2;
    } else if (val >= 10 && val < 20) {
        step = 0.5;
    } else if (val >= 20 && val < 30) {
        step = 1;
    } else if (val >= 30 && val < 50) {
        step = 2;
    } else if (val >= 50 && val < 100) {
        step = 5;
    } else if (val >= 100 && val < 1000) {
        step = 10;
    } else if (val > 1000) {
        step = null;
    }
    return step;
}

function getDecremantal(fval) {
    var val = parseFloat(fval);
    var step;
    if (val <= 2) {
        step = 0.01;
    } else if (val > 2 && val <= 3) {
        step = 0.02;
    } else if (val > 3 && val <= 4) {
        step = 0.05;
    } else if (val > 4 && val <= 6) {
        step = 0.1;
    } else if (val > 6 && val <= 10) {
        step = 0.2;
    } else if (val > 10 && val <= 20) {
        step = 0.5;
    } else if (val > 20 && val <= 30) {
        step = 1;
    } else if (val > 30 && val <= 50) {
        step = 2;
    } else if (val > 50 && val <= 100) {
        step = 5;
    } else if (val > 100 && val <= 1000) {
        step = 10;
    } else if (val > 1000) {
        step = null;
    }
    return step;
}

Answer 3

Your code will return undefined for whole numbers.

Change all instances of val > number to val >= number