javascript if condition not working?

Question

I am sitting like hours in front of the following code snippet and can not get it running like I want.

Basically this code creates a navigation menu on right click, but a click on the switcher should turn off this function and on the next click it gets turned on again.

Everything works fine (like expected), just the little if statement on line 12 ( if ( switcher % 2 == 0 ) ) does not work like expected, meaning the code within it always gets executed whether var switcher is even or not even. I also tried other conditions like "> 0" and so on but the code within it always gets executed.

$(document).ready(function () {
    /* Set switcher to zero */
    switcher = 0;
    /* If switch gets clicked increment var switcher*/
    $('#guidenavschalter').click(function () {
        switcher++;
        return false;
    });

    /* If var switcher is even execute following code, if not do nothing of this*/
    if (switcher % 2 == 0) {
        /* do not display right click browser menu */
        document.oncontextmenu = function () {
            return false;
        };
        /* if click within #page excluding area of #newid */
        $('#page:not(#newid)').mousedown(function (e) {
            /* if right click */
            if (e.button == 2) {
                /* if #newid already exist display it again */
                if ($('#newid').length) {
                    $('#newid').css({
                        "display": 'block'
                    });
                    $('#newid').css({
                        "top": e.pageY + 'px'
                    });
                    $('#newid').css({
                        "left": e.pageX + 'px'
                    });
                    /* if it does not exist create and display #newid */
                } else {
                    var $div = $('#block-bookoblock-book-outline').clone().attr('id', 'newid');
                    $('body').append($div);
                    $('#newid').css({
                        "top": e.pageY + 'px'
                    });
                    $('#newid').css({
                        "left": e.pageX + 'px'
                    });
                    $('#newid').css({
                        "position": 'absolute'
                    });
                    return false;
                }
            }
            /* if left click hide #newid */
            if (e.button == 0) {
                $('#newid').css({
                    "display": 'none'
                });
            }
            return true;
        });
    }
});

Is this `$('#guidenavschalter').click` event getting fired? Can you place a console.log and see if switcher is getting incremented ? — mohkhan, Jul 23 '13 at 10:27

Denys Séguret · Answer 1 · 2013-07-23T10:53:42.417

3

Your code basically is

switcher = 0;

... some irrelevant code here (the callback is not executed right now)

if ( switcher % 2 == 0 ) {

So no wonder the test always pass.

What you probably want is to put the if inside the callback, so that it's tested each time you click :

var switcher = 0;
$('#guidenavschalter').click(function(){
    switcher++;
    if ( switcher % 2 == 0 ) {
       ...
    }
    return false;
});

edited Jul 23 '13 at 10:53

answered Jul 23 '13 at 10:29

Denys Séguret

372,613
87
782
758

Exactly what I wanted to type. This is on target. – CM Kanode Jul 23 '13 at 10:35
Just tried it and everything gets pretty weird, until 3 clicks the stuff within the mentioned if condition gets not executed, after this it gets always get executed – Tobias Kess Jul 23 '13 at 10:46
maybe you also need to know there is a link within #page that increments var switcher, but before it gets clicked the regular behaviour should be display own navigation menu on right click, if swithcer gets clicked, turn off and siplay regular browser menu, on next click turn on own nav menu and so on – Tobias Kess Jul 23 '13 at 10:48

score 1 · Answer 2 · edited May 23 '17 at 11:57

1

switcher = 0;  // created outside the click event handler

and you're increment the value inside click event handler. Therefore it is always zero.

You should go through Scoping in JavaScript

From comment, you're interested to know more about variable scope in Javascript then

check out this SO answer

edited May 23 '17 at 11:57

Community

1
1

answered Jul 23 '13 at 10:29

Praveen

55,303
33
133
164

switcher gets incremented and also alerts the correct value of var switcher within the right click function for example – Tobias Kess Jul 23 '13 at 10:36
@Tobias Kess that is what called scope. – Praveen Jul 23 '13 at 10:41
honestly scoping really confuses me, but it feels like you are leading me in the right direction. – Tobias Kess Jul 23 '13 at 11:08
@TobiasKess I would like you to take a look at this question http://stackoverflow.com/questions/500431/javascript-variable-scope has short examples to understand easily. – Praveen Jul 23 '13 at 11:30

score 0 · Accepted Answer · edited Jul 23 '13 at 11:33

I don't think it is the condition switcher % 2 == 0 that is problematic here. You have hooked events in case of true but is there an Else statement that unhooks those events so that the original functionality is resumed? i.e. Right click create default context menu.

Update:

In order to resume original functionality, call

document.oncontextmenu = null;

in else part.

Also, you need to define $('#page:not(#newid)').mousedown(function (e) { only once (outside of if/else ) and then use the switcher variable to determine whether to call the functionality or not.

In short, you need the following

$(document).ready(function () {
    /* Set switcher to zero */
    switcher = 0;
    /* If switch gets clicked increment var switcher*/
    $('#guidenavschalter').click(function () {
        switcher++;
        return false;
    });

    document.oncontextmenu = function() {
        if ( switcher % 2 == 0 ) {
            return false;
        } else {
            return true;
        }
    };
    /* if click within #page excluding area of #newid */
    $('#page:not(#newid)').mousedown(function (e) {
        if (switcher % 2 == 0) {
            // do stuff
        } else {
            // do nothing
        }
    });

});

I think that is what I need, but how do I unhook oncontextmenu and mousedown? — Tobias Kess, Jul 23 '13 at 10:43
you really rock, just needed to change the document.oncontextmenu function to the following: ` document.oncontextmenu = function() { if ( switcher % 2 == 0 ) { return false; } else { return true; } };` — Tobias Kess, Jul 23 '13 at 11:30

javascript if condition not working?

3 Answers3