Nested JS if statement not working properly

Question

I am using a counter to display appropriate information upon each click, but I can not get the button to work past one click. I believe I am adding to my counter correctly but for some reason it is not registering properly. Any modifications would be appreciated.

$(document).on("click", ".proceedBtn", function() {
            $i = 0;
            $i = $i + 1;
            if ($i == 1){
                if ($i == 2){
                    $('#billingQuestions').hide();
                    $('#billingQuestions2').hide();
                    $('#noQuestions').hide();
                    $('#noQuestions2').hide();
                    $('#paymentInfo').show();
                    $('#paymentInfo2').show();
                    $('.arrow').css('left', '84%');
                    console.log("payment");
                    return;
                } 
                $('#noQuestions').show();
                $('#noQuestions2').show();
                $('#billingQuestions').hide();
                $('#billingQuestions2').hide();
                $('#paymentInfo').hide();
                $('#paymentInfo2').hide();
                $('.arrow').css('left', '50%');
                $i++;
                console.log("shipping");
                return;
            }       
        });

`$i = 0; $i = $i + 1;` But why? Despite that, you reset your counter on every click. you might wanna use a global variable defined outside the click-handler — empiric, Jan 18 '17 at 21:28
Also, you have if ($i == 1) and inside this statement you have if ($i == 2) which is invalid (it will never go to the second 'if') — Observer, Jan 18 '17 at 21:30
Don't prefix all of your variables with `$`. This isn't PHP. But if you look at your code you start by setting `$i` to `0`. You then immediately increment it to `1`. Before anything else, you check if the value is really `2`. How would it ever reach `2`? — Mike Cluck, Jan 18 '17 at 21:31
Thanks for all the helpful comments everyone, still a beginner at JS, appreciate the responses. — user7366442, Jan 18 '17 at 21:36

score 2 · Answer 1 · answered Jan 18 '17 at 21:37

Remember, everything inside the function is executed after every click.

$(document).on("click", ".proceedBtn", function() {
    $i = 0;              // On every click $i is reset to 0
    $i = $i + 1;         // Now $i == 1
    if ($i == 1) {       // So this condition is always true
        if ($i == 2) {   // And this condition is always false
            ...          // That's why this part is never executed
        }
    }
}

What you probably need is this:

$i = 0;
$(document).on("click", ".proceedBtn", function() {
    $i = $i + 1;
    if ($i == 1){
        $('#noQuestions').show();
        $('#noQuestions2').show();
        $('#billingQuestions').hide();
        $('#billingQuestions2').hide();
        $('#paymentInfo').hide();
        $('#paymentInfo2').hide();
        $('.arrow').css('left', '50%');
        console.log("shipping");
    }       
    else if ($i == 2){
        $('#billingQuestions').hide();
        $('#billingQuestions2').hide();
        $('#noQuestions').hide();
        $('#noQuestions2').hide();
        $('#paymentInfo').show();
        $('#paymentInfo2').show();
        $('.arrow').css('left', '84%');
        console.log("payment");
    } 
});

score 0 · Answer 2 · answered Jan 18 '17 at 21:34

The $i variable is always 0 when you click so when you make the sum of $i + 1 is always 1.

Besides that, you have a lot of ID's in your page, can't you use a class for the elements you want to hide and show? Check the structure of your page, you could optimize your html and their classes/ID

Nested JS if statement not working properly

2 Answers2