Possible JS/JQuery mistake, only triggering on one of many "if" statement events

I’m trying to build something like the screenshot below. I’ve managed to work most of it out, except the JS/JQuery I’ve written doesn’t seem to work properly. Ideally, this is what should be happening:

  • As soon as either of the first two bars are moved from their default position, the “My Custom Plan” button activates.

  • If the number from the second bar is between 8000 and 6000, the first two icons on the bottom bar highlight.

  • If the number from the second bar is between 6000 and 4000, all of the icons highlight.

  • If the number from the second bar is between 4000 and 2000, all of the icons except for the first one highlight.

  • If the number from the second bar is between 2000 and 0, the last three icons highlight.

The problem I’m having, is that the “My Custom Plan” button only activates with the appropriate icons when the last threshold (between 2000 and 0) is crossed. None of the appropriate icons highlight when the second bar crosses any of the other thresholds. This is the JS/JQuery I have written right now:

<!-- Script for Dragabble Emissions Bar -->
<script>
    $(function(){
        var initialWidth = 9.1;
        var dragging = false;

        $('.dragme2').mousedown(function(e){
            dragging = true;
            var parentOffset = $(this).parent().offset();
            e.preventDefault();

            $(document).mousemove(function(e){
                if (dragging == true){
                    $('.dragme2').css("width",e.pageX - parentOffset.left,);
                    $('.dragme2').css("max-width", 728);
                    $('.dragme2').css("min-width", 10);
                    var amountEmissions = ((e.pageX - parentOffset.left) / initialWidth * 100)
                    $('.result2').html(amountEmissions.toFixed(0) + "lbs");
                        if (amountEmissions.toFixed(0) > 8000){
                            $('.result2').html(8000 + "lbs" );
                        };
                        if (amountEmissions.toFixed(0) <= 0){
                            $('.result2').html(0 + "lbs" );
                        };
                        if (8000 > amountEmissions.toFixed(0) > 6000){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st04, .st05").css({fill:"rgb(236,182,30)"})}

                        if (6000 > amountEmissions.toFixed(0) > 4000){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})};

                        if (4000 > amountEmissions.toFixed(0) > 2000){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})};

                        if (2000 > amountEmissions.toFixed(0) > 0){
                            $("#Button2").click();
                            $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
                            $(".st07, .st08, .st09").css({fill:"rgb(236,182,30)"})};

                    }
                });
            });

        $(document).mouseup(function(e){
            if (dragging){
                dragging = false;
                console.log('drag stopped');
            }
        });
    });
</script>

As I’m sure you can tell, I’m kind of a beginner. Can anyone tell me where I might be going wrong, or perhaps another way to go about this? Thanks so much!

Design Screenshot

In JavaScript you cannot do ternary comparisons — with two > in them.

Instead use else if:

if (amountEmissions.toFixed(0) > 8000){
    $('.result2').html(8000 + "lbs" );
} else if (amountEmissions.toFixed(0) > 6000){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st04, .st05").css({fill:"rgb(236,182,30)"})
} else if (amountEmissions.toFixed(0) > 4000){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})
} else if (amountEmissions.toFixed(0) > 2000){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st05, .st06, .st07, .st08, .st09").css({fill:"rgb(236,182,30)"})
} else if (amountEmissions.toFixed(0) > 0){
    $("#Button2").click();
    $(".st04, .st05, .st06, .st07, .st08, .st09").css({fill:"grey"})
    $(".st07, .st08, .st09").css({fill:"rgb(236,182,30)"})
} else { // if (amountEmissions.toFixed(0) <= 0){
    $('.result2').html(0 + "lbs" );
};

Also, define the $(document).mousemove event handler outside of the $(‘.dragme2’).mousedown event handler. Otherwise you will be creating that event handler each time you have a mouse down event, accumulating them.

That’s because you are doing strange things. When you write:

4000 > amountEmissions.toFixed(0) > 2000

It evaluates like

(4000 > amountEmissions.toFixed(0)) > 2000

and since true > 2000 is false and false > 2000 is false your code is going to skip them all.

P.S. my console evaluates true > 0 as true. I think that’s the reason why your last if statement

2000 > amountEmissions.toFixed(0) > 0
(true) > 0

is returning true 🙂