Common Javascript knowledge (or any programming language really) tells us that using !variable will equal the opposite value when it's Boolean (or converted to Boolean in a conditional, etc).

I have this Javascript:

$(document).ready(function () {    
    var addEvent = function (element, myEvent, fnc) {
        return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
    };
    var openBar = false;
    addEvent(document.getElementById('toggle'), 'click', function (event) {
        var toggler = event.currentTarget,
            barWrap = document.getElementById('left-wrap'),
            newSize = (!openBar) ? 20 : 0;
        $(barWrap).animate({
            width: (newSize / 100 * window.innerWidth)
        }, {
            queue: false,
            duration: 300,
            step: function (now) {
                toggler.style.right = now + 'px';
                //barWrap.outerWidth = now;
                document.body.style.marginRight = now + 'px';
            },
            plete: function () {
                newSize = (newSize === 20) ? '20%' : '0%';
                document.body.style.marginRight = newSize;
                toggler.style.right = newSize;
                barWrap.style.width = newSize;
            }
        });
        return !openBar;
    });
});

...that I threw into this JSFiddle...which will show it open the toggle bar but not close it...with a lot of fluffy HTML and CSS too prettify it for y'all.

Now, why on earth does the 3rd to last line NOT return the opposite value as it should? I have successfully used the following:

return openBar = !openBar;

but for some reason browsers and JSfiddle and JShint like to get mad when I do because they expect a conditional or value instead of assignment. But they don't fail to load. I also know I can use:

openBar = !openBar;
return openBar;

or even

openBar = !openBar;
return;

but I like to minimize everywhere I can and really just want to understand why this fundamentally is failing to work for me so I can correct it in the future.

Is this in anyway inpatible with another browser (using Chrome 30 and Firefox 25) or possibly going to error out somewhere I'm not anticipating?

Or is it more of an inconvenience/warning that I can ignore (like those things telling me to use === instead of == when paring 0 when I know the result can only be a number)?

Common Javascript knowledge (or any programming language really) tells us that using !variable will equal the opposite value when it's Boolean (or converted to Boolean in a conditional, etc).

I have this Javascript:

$(document).ready(function () {    
    var addEvent = function (element, myEvent, fnc) {
        return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
    };
    var openBar = false;
    addEvent(document.getElementById('toggle'), 'click', function (event) {
        var toggler = event.currentTarget,
            barWrap = document.getElementById('left-wrap'),
            newSize = (!openBar) ? 20 : 0;
        $(barWrap).animate({
            width: (newSize / 100 * window.innerWidth)
        }, {
            queue: false,
            duration: 300,
            step: function (now) {
                toggler.style.right = now + 'px';
                //barWrap.outerWidth = now;
                document.body.style.marginRight = now + 'px';
            },
            plete: function () {
                newSize = (newSize === 20) ? '20%' : '0%';
                document.body.style.marginRight = newSize;
                toggler.style.right = newSize;
                barWrap.style.width = newSize;
            }
        });
        return !openBar;
    });
});

...that I threw into this JSFiddle...which will show it open the toggle bar but not close it...with a lot of fluffy HTML and CSS too prettify it for y'all.

Now, why on earth does the 3rd to last line NOT return the opposite value as it should? I have successfully used the following:

return openBar = !openBar;

but for some reason browsers and JSfiddle and JShint like to get mad when I do because they expect a conditional or value instead of assignment. But they don't fail to load. I also know I can use:

openBar = !openBar;
return openBar;

or even

openBar = !openBar;
return;

but I like to minimize everywhere I can and really just want to understand why this fundamentally is failing to work for me so I can correct it in the future.

Is this in anyway inpatible with another browser (using Chrome 30 and Firefox 25) or possibly going to error out somewhere I'm not anticipating?

Or is it more of an inconvenience/warning that I can ignore (like those things telling me to use === instead of == when paring 0 when I know the result can only be a number)?

• javascript
• jquery

• 3 openbar is not being modified when you do return !openbar. Behavior makes sense. – elclanrs Commented Nov 10, 2013 at 8:13
• Even though it's awkward - it's still syntactically correct: jsfiddle/JHTct and does work – zerkms Commented Nov 10, 2013 at 8:14
• When I use !(openBar) in a separate part of the code it will alter the value correctly without using an assignment – Deryck Commented Nov 10, 2013 at 8:14
• Returning an assignment is fine, on JSHint you can just use boss:true and will get rid of the warning. – elclanrs Commented Nov 10, 2013 at 8:14
• 1 Because there's no assignment, that's it. – elclanrs Commented Nov 10, 2013 at 8:16

2 Answers 2

To the best of my knowledge, you have to explicitly re-assign your original openBar variable for it to work. I'm interested in seeing an example of what makes you think otherwise. I made this small modification and removed the return:

newSize = (openBar = !openBar) ? 20 : 0;

http://jsfiddle/a9NPG/1/ (although I read that you're not really interested in it.)

Array.reverse() is a nice little fella:

DEMO

$(function () {

    var $toggler = $('#toggle'),
        $barWrap = $('#left-wrap'),
        $doc     = $('body'),
        newSize  = ['0', '20'];

    $toggler.on('click', function(){
        var winW = window.innerWidth,
            perc = newSize.reverse()[0],
            px   = perc / 100 * winW; 
        console.log( px );
        $barWrap.animate({   width : px });
        $toggler.animate({   right : px });
        $('body').animate({ marginRight: px }); 
    }); 

});