Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  body (R = red ; B = blue backgrounds)
  
  <h1>HELLO WORLD! press "H" key</h1>
  
  
  
</body>
</html>
 
.color_yellow{
  background:yellow;
}
.bg_red{
  background:red;
}
.bg_blue{
  background:blue;
}
​
 
$(document).ready(function () {
  
    $('body').on('keydown keyup', function(e) {
​
      var keyAction = {
​
        82  : ['body', 'bg_red' ],  // R key
        66  : ['body', 'bg_blue' ], // B key
        72  : ['h1', 'color_yellow' ]  // H key
        
      },
          key = e.which,              
          keyArr = keyAction[key],  
          element,
          method = e.type=="keydown" ? 'addClass' : 'removeClass',         
          property;
      
      if(typeof keyArr != "undefined"){
         element  = keyArr[0], 
         property = keyArr[1];       
         $(element)[method](property);  // do stuff
      }
​
​
    });
​
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers