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=".1.1/jquery.min.js"></script>
<button class="keyboard-btn">click here</button>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="keyboard-btn">click here</button>

• javascript
• jquery
• html

5 Answers 5

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 e in handy.

How about this?

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

This may helpful

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

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

});

Just replace first 4 lines with this code :

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

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.