css - JavaScript NOT operator on Boolean -

so got piece of code work, i'm having trouble understanding why works. css has sprite sheet animates box morphing circle.

the animation-play-state : paused; rule in css keeps sprite starting animation till key pressed see in javascript code.

my question why if execute code block when keycheck false. knowledge of how ! operator works, isn't code suppose execute when keycheck "not" false ? initial value false why run ?

the code suppose stop event executing repeatedly when key held down.

keycheck = false;  window.addeventlistener("keydown", checkkey_dn, false); window.addeventlistener("keyup", checkkey_up, false);  function checkkey_dn(e) {     if(e.keycode == "83" && !keycheck){         keycheck = true;         $("boxmorph").style.animationplaystate = "running";         $("boxmorph").style.webkitanimationplaystate = "running";         $("boxmorph").style.visibility = "visible";         $("boxmorph").classlist.remove ("boxes");         $("boxmorph").offsetwidth = $("boxmorph").offsetwidth;         $("boxmorph").classlist.add ("boxes");              }   }  function checkkey_up(e){     if(e.keycode == "83"){         keycheck = false;         $("boxes").style.visibility = "hidden";       }   } 

this piece of code helps re-animate css sprites.

$("boxmorph").classlist.remove ("boxes"); $("boxmorph").offsetwidth = $("boxmorph").offsetwidth; $("boxmorph").classlist.add ("boxes");   

you've misunderstood not - returns inverse of value:

if(false) { /* block not executed */ }  if(!false) { /* block executed */ } 

this because !false evaluates true, equivalent to:

if(true) { /* block executed */ } 

the check if(!keycheck) succeed only when value of keycheck falsy, e.g. keycheck = false.