Change css property depend on if condition with right key press

Question

I'd like to change css property depend on if-condition, what mean if the user press right key change background with specific color and if he press again change background color to other color.

$(document).ready(function() {
  $(document).keyup(function(e) {
    var counter = 0;
    switch (e.which) {
      case 39: // right
        if (counter == 1) {
          $(".my-div").css("background-color", "red");
          counter = counter + 1;
        }
        if (counter == 2) {
          $(".my-div").css("background-color", "yellow");
          counter = counter + 1;
        }
        if (counter == 3) {
          $(".my-div").css("background-color", "green")
          counter = counter + 1;
        }
        break;
      default:
        return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });
  console.log(counter);
})

.my-div {
  width: 1170px;
  height: 500px;
  margin: 50px auto;
  background-color: #0026ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div"></div>

So every time a key is pressed, you set counter to 0. Then you check for 1, 2, or 3. So nothing happens. — Jason P
– Jason P, Commented Sep 12, 2016 at 17:20

Malk · Accepted Answer · 2016-09-12 19:48:34Z

Use the stylesheet for background color changes. Here's how you can use the element to keep track of its current state while controlling styling at the same time:

$(document).ready(function() {

  $(document).keyup(function(e) {
    var counter = $(".my-div").attr('rcount') || 0;

    //Resets to state0. Uncomment to stop after third trigger:
    //if (counter < 3) 
       counter = (++counter % 4);

    switch (e.which) {
      case 39: // right
          $(".my-div").attr("rcount", counter);
          break;
      default:
        return;
    }
    e.preventDefault(); 
  });
})

.my-div {
  width: 200px;
  height: 500px;
  margin: 50px auto;
  background-color: #0026ff;
}

.my-div[rcount='0'] { background-color: #0026ff;}
.my-div[rcount='1'] { background-color: red;}
.my-div[rcount='2'] { background-color: yellow; }
.my-div[rcount='3'] { background-color: green; }

/* Debug styles added to show current rcount value */
.my-div.debug { position:relative; }
.my-div.debug:before { 
  content: 'rcount ' attr( rcount );
  color:white;
  text-shadow:1px 1px 1px black;
  position:absolute;
  left:0;
  top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div debug"></div>

Zakaria Acharki · Accepted Answer · 2016-09-12 17:47:51Z

Move counter out of keyup event and set it to 1, use triple equals === instead and add else to conditions so it will check the condition then move to the next one, inside those conditions increment the counter :

$(document).ready(function() {
  var counter = 1;
  
  $(document).keyup(function(e) {
    switch (e.which) {
      case 39: // right
        if (counter === 1) {
          $(".my-div").css("background-color", "red");
          counter++;
        }else if (counter === 2) {
          $(".my-div").css("background-color", "yellow");
          counter++;
        }else if (counter === 3) {
          $(".my-div").css("background-color", "green")
          counter=1;
        }
        break;
      default:
        return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });
  
})

.my-div {
  width: 117px;
  height: 50px;
  margin: 50px auto;
  background-color: #0026ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-div"></div>

caldera.sac · Accepted Answer · 2016-09-12 18:02:51Z

try this out , this will show random color when you click right arrow or left arrow

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
.changeme{
    width: 300px;
    height: 300px;
    background-color: orange;
}



</style>

<body>

<div class="changeme"></div>


</body>

<script type="text/javascript">

$("body").keydown(function(e){
    if(e.keyCode == 37)//when you click the left arrow button
    {
        var theColor = getRandomColor();
        $(".changeme").css({"background-color":theColor});
    }
    else if(e.keyCode == 39)//when you click right arrow button
    {
        var theColor = getRandomColor();
        $(".changeme").css({"background-color":theColor});
    }
});


//generate a random color
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

</script>

</html>

Collectives™ on Stack Overflow

Change css property depend on if condition with right key press

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related