click to return false, click again to return true

user_7111854 0
Viewed 7302

When someone clicks a button I want my function to return false and the keydown function will be disabled.

Then, if I click this same button a second time, it will return true and the keydown function will be enabled.

I did like this but it only returns false and keydown function disabled. I also need to enable this keydown function by clicking this button.

How can I do this? 

var controlsEnabled = true;
$(".keyboard-btn").on('click', function() {
  controlsEnabled = false;
});

$(document).keydown(function(e) {
  if (controlsEnabled) {
    if (e.keyCode == 38) {
      verticalSlideDown();
      console.log("pressed key for Down : " + e.keyCode);
    }

    if (e.keyCode == 40) {
      verticalSlideUp();
      console.log("pressed key for Up: " + e.keyCode);
    }

    if (e.keyCode === 13) {
      var div = $(".scroll-inner-container");
      console.log("pressed key for stop : " + e.keyCode);
      div.stop();
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="keyboard-btn">click here</button>

html jquery javascript
5 Answers

Your click even only ever sets controlEnabled to false. You need a way to toggle.

The quickest option is to write this

$(".keyboard-btn").on('click', function() {
  controlsEnabled = !controlsEnabled // will toggle false -> true or true -> false;
});

You could also use if statements to achieve the same thing.. like this

$(".keyboard-btn").on('click', function()
{
      if(controlsEnabled)
      {
          controlsEnabled = false;
      }
      else
      {
          controlsEnabled = true;
      }
});

This is more long-winded, but perfectly valid, and you could argue it's easier to read. You could also use a ternary operator like this

controlsEnabled = (controlsEnabled)? false : true;

But that wouldn't really give any advantage, being neither easier to read, or more elegant. But it's worth knowing the different ways to conditionally set a value based on itself. You never know when it might come in handy.

user_39970790

How about this? 

$(".keyboard-btn").on('click', function() {
  controlsEnabled = !controlsEnabled;
});
user_23244340

This may helpful 

$(".keyboard-btn").on('click', function () {

       controlsEnabled= controlsEnabled? false :true ; //  controlsEnabled = !controlsEnabled 

});
user_65973750

Just replace first 4 lines with this code :

var controlsEnabled = true;
$(".keyboard-btn").on('click', function() {
  controlsEnabled = !controlsEnabled;
});
user_66189340

Firstly, your function doesn't return anything at the moment - you need to add the return keyword.

Secondly, your code isn't performing a boolean switch, it is merely assigning a boolean value. As true=1 and false=0, you can write:

controlsEnabled^=1;

which uses the XOR operator to switch from true to false and back again.

user_43619990
Related